I have a .svg which looks like this:
So those are a few rectangles with border radius that have image as a background. That .svg was exported from Figma and I used react-svgr.com to convert it to a React component which looks like this:
import Svg, {
SvgProps,
Rect,
Path,
Defs,
Pattern,
Use,
Image,
} from "react-native-svg"
function SvgComponent(props: SvgProps) {
return (
<Svg
width={375}
height={451}
viewBox="0 0 375 451"
fill="none"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
{...props}
>
<Rect
x={141}
y={24}
width={45}
height={45}
rx={22.5}
fill="url(#pattern0)"
/>
<Rect
x={103}
y={1}
width={27}
height={27}
rx={13.5}
fill="url(#pattern1)"
fillOpacity={0.2}
/>
<Rect
x={37}
y={43}
width={52}
height={52}
rx={26}
fill="url(#pattern2)"
/>
<Rect
x={20}
y={119}
width={77}
height={77}
rx={38.5}
fill="url(#pattern3)"
/>
<Rect
x={109}
y={75}
width={36}
height={36}
rx={18}
fill="url(#pattern4)"
fillOpacity={0.5}
/>
<Rect
x={181}
y={105}
width={70}
height={70}
rx={35}
fill="url(#pattern5)"
/>
<Rect
x={286}
y={49}
width={70}
height={70}
rx={35}
fill="url(#pattern6)"
/>
<Rect
opacity={0.1}
x={283}
y={13}
width={24}
height={24}
rx={12}
fill="url(#pattern7)"
/>
<Rect
x={263}
y={140}
width={101}
height={101}
rx={50.5}
fill="url(#pattern8)"
/>
<Rect
x={221}
y={36}
width={48}
height={48}
rx={24}
fill="url(#pattern9)"
fillOpacity={0.5}
/>
<Rect
x={208}
width={15}
height={15}
rx={7.5}
fill="url(#pattern10)"
fillOpacity={0.5}
/>
<Path
fillRule="evenodd"
clipRule="evenodd"
d="M190 95.5C190 100.194 186.194 104 181.5 104C176.805 104 173 100.194 173 95.5C173 90.8056 176.805 87 181.5 87C186.194 87 190 90.8056 190 95.5ZM159 122.5C159 139.345 145.344 153 128.5 153C111.655 153 97.9998 139.345 97.9998 122.5C97.9998 105.655 111.655 92 128.5 92C145.344 92 159 105.655 159 122.5ZM90.2745 308.718C78.681 329.187 56.7037 343 31.5 343C-5.77922 343 -36 312.779 -36 275.5C-36 257.443 -28.9096 241.042 -17.3612 228.929C-19.0572 225.133 -20.0002 220.927 -20.0002 216.5C-20.0002 199.655 -6.34493 186 10.4998 186C20.055 186 28.5839 190.394 34.1762 197.272C45.6154 176.26 67.8924 162 93.5 162C108.072 162 121.565 166.617 132.596 174.469C135.396 160.513 147.72 150 162.5 150C175.81 150 187.129 158.526 191.293 170.414C194.198 169.496 197.291 169 200.5 169C205.309 169 209.859 170.113 213.905 172.096C217.213 158.829 229.209 149 243.5 149C260.345 149 274 162.655 274 179.5C274 185.335 272.361 190.788 269.519 195.423C272.975 195.143 276.471 195 280 195C301.742 195 322.218 200.421 340.15 209.985C345.133 199.92 355.508 193 367.5 193C384.344 193 398 206.655 398 223.5C398 234.1 392.592 243.437 384.385 248.903C399.256 269.815 408 295.386 408 323C408 393.692 350.692 451 280 451C260.867 451 242.714 446.802 226.413 439.277C222.008 439.755 217.532 440 213 440C145.069 440 90 384.931 90 317C90 314.217 90.0925 311.455 90.2745 308.718ZM194 156C202.836 156 210 148.837 210 140C210 131.163 202.836 124 194 124C185.163 124 178 131.163 178 140C178 148.837 185.163 156 194 156Z"
fill="#335EEA"
/>
<Defs>
<Pattern
id="pattern0"
patternContentUnits="objectBoundingBox"
width={1}
height={1}
>
<Use
xlinkHref="#image0"
transform="translate(0 -0.521277) scale(0.00425532)"
/>
</Pattern>
<Pattern
id="pattern1"
patternContentUnits="objectBoundingBox"
width={1}
height={1}
>
<Use
xlinkHref="#image1"
transform="translate(-0.25) scale(0.003125)"
/>
</Pattern>
<Pattern
id="pattern2"
patternContentUnits="objectBoundingBox"
width={1}
height={1}
>
<Use
xlinkHref="#image2"
transform="translate(0 -0.25) scale(0.003125)"
/>
</Pattern>
<Pattern
id="pattern3"
patternContentUnits="objectBoundingBox"
width={1}
height={1}
>
<Use
xlinkHref="#image3"
transform="translate(0 -0.181818) scale(0.00284091)"
/>
</Pattern>
<Pattern
id="pattern4"
patternContentUnits="objectBoundingBox"
width={1}
height={1}
>
<Use
xlinkHref="#image4"
transform="translate(0 -0.121762) scale(0.00259067)"
/>
</Pattern>
<Pattern
id="pattern5"
patternContentUnits="objectBoundingBox"
width={1}
height={1}
>
<Use
xlinkHref="#image5"
transform="translate(0 -0.25) scale(0.003125)"
/>
</Pattern>
<Pattern
id="pattern6"
patternContentUnits="objectBoundingBox"
width={1}
height={1}
>
<Use
xlinkHref="#image6"
transform="translate(0 -0.25) scale(0.003125)"
/>
</Pattern>
<Pattern
id="pattern7"
patternContentUnits="objectBoundingBox"
width={1}
height={1}
>
<Use
xlinkHref="#image7"
transform="translate(-0.0783133) scale(0.00240964)"
/>
</Pattern>
<Pattern
id="pattern8"
patternContentUnits="objectBoundingBox"
width={1}
height={1}
>
<Use
xlinkHref="#image8"
transform="translate(0 -0.25) scale(0.003125)"
/>
</Pattern>
<Pattern
id="pattern9"
patternContentUnits="objectBoundingBox"
width={1}
height={1}
>
<Use
xlinkHref="#image9"
transform="translate(-0.25) scale(0.003125)"
/>
</Pattern>
<Pattern
id="pattern10"
patternContentUnits="objectBoundingBox"
width={1}
height={1}
>
<Use
xlinkHref="#image10"
transform="translate(-0.25) scale(0.003125)"
/>
</Pattern>
<Image
id="image0"
width={235}
height={480}
xlinkHref="data..."
/>
<Image
id="image1"
width={480}
height={320}
xlinkHref="data..."
/>
<Image
id="image3"
width={352}
height={480}
xlinkHref="data..."
/>
<Image
id="image4"
width={386}
height={480}
xlinkHref="data..."
/>
<Image
id="image5"
width={320}
height={480}
xlinkHref="data..."
/>
<Image
id="image6"
width={320}
height={480}
xlinkHref="data..."
/>
<Image
id="image7"
width={480}
height={415}
xlinkHref="data..."
/>
<Image
id="image8"
width={320}
height={480}
xlinkHref="data..."
/>
<Image
id="image9"
width={480}
height={320}
xlinkHref="data..."
/>
<Image
id="image10"
width={480}
height={320}
xlinkHref="data.."
/>
</Defs>
</Svg>
)
}
export default SvgComponent
The problem I am experiencing is that the rendered svg component looks like that:
So the images for the rectangles that are defined as Patterns have wrong coordinates/do not match the position of those rectangles. I am not sure why this is the case and have tried reformating my .svg but nothing seemed to solve the issue. Can somebody please point me into the right direction?
I have an app where I would like to move between views when the user clicks a button. Here is what I have so far:
<Canvas >
<FlyControls enableDamping={false} movementSpeed={3} rollSpeed={0.05} dragToLook={true} makeDefault={props.cameraView==0} />
<PerspectiveCamera position={[0,14,2]} heightMin={2} heightMax={2} fov={45} lookat={new THREE.Vector3(0,0,2)} makeDefault={props.cameraView==0} up={new THREE.Vector3(0,0,1)} />
<MapControls enableDamping={false} movementSpeed={3} rollSpeed={0.01} dragToLook={true} makeDefault={props.cameraView==1}/>
<OrthographicCamera position={[0,0,20]} zoom={40} fov={45} lookat={new THREE.Vector3(0,0,2)} makeDefault={props.cameraView==1} up={new THREE.Vector3(0,0,1)} />
<OrbitControls enableDamping={false} makeDefault={props.cameraView==2} />
<PerspectiveCamera fov={45} position={[posX-2,posY-2,1.5]} lookat={new THREE.Vector3(posX, posY, 1.5)} makeDefault={props.cameraView==2} up={new THREE.Vector3(0,0,1)} />
There are a couple of issues. First, when the orbit controls is not present, the fly controls and map controls work just fine. However, when the orbit controls is added, the app starts with orbit controls and cannot be changed. Second, the lookat and camera positions don't seem to change with the algorithm.
I have also tried this ...
// Calculations for different camera setups
let posX = props.currentFixture!=null ? props.fixtures[props.currentFixture]['positions'][0]-props.origin[0] : 0;
let posY = props.currentFixture!=null ? props.fixtures[props.currentFixture]['positions'][1]-props.origin[1] : 0;
let lookat = props.cameraView!=2 ? new THREE.Vector3(0,0,2) : new THREE.Vector3(posX, posY, 1.5)
return (
<Canvas >
<FlyControls enableDamping={false} movementSpeed={3} rollSpeed={0.05} dragToLook={true} makeDefault={props.cameraView==0} />
<PerspectiveCamera position={[0,14,2]} heightMin={2} heightMax={2} fov={45} lookat={lookat} makeDefault={props.cameraView==0} up={new THREE.Vector3(0,0,1)} />
<MapControls enableDamping={false} movementSpeed={3} rollSpeed={0.01} dragToLook={true} makeDefault={props.cameraView==1}/>
<OrthographicCamera position={[0,0,20]} zoom={40} fov={45} lookat={lookat} makeDefault={props.cameraView==1} up={new THREE.Vector3(0,0,1)} />
<OrbitControls enableDamping={false} makeDefault={props.cameraView==2} />
This has the same issues. It appears that you can't really have separate controls and disable orbit controls, but that can't be right.
Both the TextField and the TextArea in the attached image have the same UIID. I have set the left padding be 1 mm using theme designer.
You can see that the left padding is applied to the TextField but not the TextArea.
I have also attempted to set it manually in the code using gui_TextArea.getAllStyles().setPaddingLeft(1); and gui_textArea.getAllStyles().setPadding(1,1,1,1); to no effect.
There does not appear to be a setTextUIID() method for TextArea.
How do we set the padding for this component?
Full source per Steve's request:
/*
* To change this license header, choose License Headers in Project Properties.
* To change this template file, choose Tools | Templates
* and open the template in the editor.
*/
package com.this.that.gui;
import com.codename1.ui.Button;
import com.codename1.ui.Component;
import com.codename1.ui.Container;
import com.codename1.ui.Dialog;
import com.codename1.ui.Display;
import com.codename1.ui.TextField;
import com.codename1.ui.layouts.BoxLayout;
import com.codename1.ui.layouts.FlowLayout;
import com.codename1.ui.layouts.LayeredLayout;
import com.codename1.ui.plaf.Style;
import com.this.that.Constants;
import com.this.that.Main;
import com.this.that.util.MyNetwork;
import com.this.that.util.MyToolbar;
import com.this.that.util.MyValidator;
import com.this.that.util.User;
import java.util.HashMap;
import java.util.Map;
/**
* GUI builder created Form
*/
public class Contact extends com.codename1.ui.Form {
private User user;
public Contact() {
this(com.codename1.ui.util.Resources.getGlobalResources());
}
public Contact(com.codename1.ui.util.Resources resourceObjectInstance) {
initGuiBuilderComponents(resourceObjectInstance);
Style s = gui_Message.getAllStyles();
s.setPaddingUnit(Style.UNIT_TYPE_DIPS);
s.setPadding(6, 6, 6, 6);
this.revalidate();
}
//-- DON'T EDIT BELOW THIS LINE!!!
private com.codename1.ui.Container gui_welcomeContainer = new com.codename1.ui.Container(new com.codename1.ui.layouts.BorderLayout());
private com.codename1.ui.Label gui_null = new com.codename1.ui.Label();
private com.codename1.ui.Container gui_BodyContainer = new com.codename1.ui.Container(new com.codename1.ui.layouts.BoxLayout(com.codename1.ui.layouts.BoxLayout.Y_AXIS));
private com.codename1.ui.Label gui_spacer1 = new com.codename1.ui.Label();
private com.codename1.ui.TextField gui_Subject = new com.codename1.ui.TextField();
private com.codename1.ui.TextArea gui_Message = new com.codename1.ui.TextArea();
private com.codename1.ui.Button gui_SubmitButton = new com.codename1.ui.Button();
// <editor-fold defaultstate="collapsed" desc="Generated Code">
private void guiBuilderBindComponentListeners() {
EventCallbackClass callback = new EventCallbackClass();
gui_SubmitButton.addActionListener(callback);
}
class EventCallbackClass implements com.codename1.ui.events.ActionListener, com.codename1.ui.events.DataChangedListener {
private com.codename1.ui.Component cmp;
public EventCallbackClass(com.codename1.ui.Component cmp) {
this.cmp = cmp;
}
public EventCallbackClass() {
}
public void actionPerformed(com.codename1.ui.events.ActionEvent ev) {
com.codename1.ui.Component sourceComponent = ev.getComponent();
if(sourceComponent.getParent().getLeadParent() != null && (sourceComponent.getParent().getLeadParent() instanceof com.codename1.components.MultiButton || sourceComponent.getParent().getLeadParent() instanceof com.codename1.components.SpanButton)) {
sourceComponent = sourceComponent.getParent().getLeadParent();
}
if(sourceComponent == gui_SubmitButton) {
onSubmitButtonActionEvent(ev);
}
}
public void dataChanged(int type, int index) {
}
}
private void initGuiBuilderComponents(com.codename1.ui.util.Resources resourceObjectInstance) {
guiBuilderBindComponentListeners();
setLayout(new com.codename1.ui.layouts.BoxLayout(com.codename1.ui.layouts.BoxLayout.Y_AXIS));
setInlineStylesTheme(resourceObjectInstance);
setScrollableY(false);
setInlineStylesTheme(resourceObjectInstance);
setTitle("");
setName("Contact");
addComponent(gui_welcomeContainer);
gui_welcomeContainer.setUIID("welcomeContainer");
gui_welcomeContainer.setInlineStylesTheme(resourceObjectInstance);
gui_welcomeContainer.setName("welcomeContainer");
((com.codename1.ui.layouts.BorderLayout)gui_welcomeContainer.getLayout()).setCenterBehavior(com.codename1.ui.layouts.BorderLayout.CENTER_BEHAVIOR_CENTER);
gui_welcomeContainer.addComponent(com.codename1.ui.layouts.BorderLayout.CENTER, gui_null);
gui_null.setText("Contact Us");
gui_null.setUIID("welcomeLabel");
gui_null.setInlineStylesTheme(resourceObjectInstance);
addComponent(gui_BodyContainer);
gui_BodyContainer.setInlineStylesTheme(resourceObjectInstance);
gui_BodyContainer.setName("BodyContainer");
gui_BodyContainer.addComponent(gui_spacer1);
gui_BodyContainer.addComponent(gui_Subject);
gui_BodyContainer.addComponent(gui_Message);
gui_BodyContainer.addComponent(gui_SubmitButton);
gui_spacer1.setText(" ");
gui_spacer1.setInlineStylesTheme(resourceObjectInstance);
gui_spacer1.setName("spacer1");
gui_Subject.setScrollVisible(true);
gui_Subject.setHint(" Subject");
gui_Subject.setUIID("TextField");
gui_Subject.setInlineStylesTheme(resourceObjectInstance);
gui_Subject.setName("Subject");
gui_Subject.setColumns(20);
gui_Message.setHint(" Please enter a brief message");
gui_Message.setUIID("TextField");
gui_Message.setInlineStylesTheme(resourceObjectInstance);
gui_Message.setName("Message");
gui_Message.setMaxSize(1000);
gui_Message.setColumns(20);
gui_Message.setRows(10);
gui_SubmitButton.setText("Submit");
gui_SubmitButton.setInlineStylesTheme(resourceObjectInstance);
gui_SubmitButton.setName("SubmitButton");
gui_SubmitButton.setTextPosition(com.codename1.ui.Component.BOTTOM);
gui_welcomeContainer.setUIID("welcomeContainer");
gui_welcomeContainer.setInlineStylesTheme(resourceObjectInstance);
gui_welcomeContainer.setName("welcomeContainer");
((com.codename1.ui.layouts.BorderLayout)gui_welcomeContainer.getLayout()).setCenterBehavior(com.codename1.ui.layouts.BorderLayout.CENTER_BEHAVIOR_CENTER);
gui_BodyContainer.setInlineStylesTheme(resourceObjectInstance);
gui_BodyContainer.setName("BodyContainer");
}// </editor-fold>
//-- DON'T EDIT ABOVE THIS LINE!!!
public void onSubmitButtonActionEvent(com.codename1.ui.events.ActionEvent ev) {
if (gui_Subject.getText().equals("") || gui_Message.getText().equals("")) {
Main.showDialog("You must enter all fields.");
} else {
if (user.getName() == null || user.getEmail() == null) {
requestNameOrEmail();
}
else{
sendMessage(false);
}
}
}
private void requestNameOrEmail(){
Dialog d = new Dialog(new BoxLayout(BoxLayout.Y_AXIS));
d.setTitle("Require Name/Email to Send");
Container nameLayeredLayout = new Container(new LayeredLayout());
TextField name = new TextField();
name.setHint("Name");
nameLayeredLayout.add(name);
Container emailLayeredLayout = new Container(new LayeredLayout());
TextField email = new TextField();
email.setHint("Email");
emailLayeredLayout.add(email);
if(user.getName() != null){
name.setText(user.getName());
}
if(user.getEmail() != null){
email.setText(user.getEmail());
}
Map<String, Boolean> validatorParams = new HashMap<>();
validatorParams.put("name", false);
validatorParams.put("email", false);
MyValidator v = new MyValidator(validatorParams);
v.setupLengthConstraint(nameLayeredLayout, name, 2, 30, "name", "Name must be 2-30 characters.");
v.setupEmailConstraint(emailLayeredLayout, email, "email", "Email not valid.");
Container buttonCnt = new Container();
Button cancel = new Button("Cancel");
cancel.addActionListener((l) -> {
d.dispose();
});
Button submit = new Button("Submit");
submit.addActionListener((l) -> {
if (v.isValid()) {
d.dispose();
sendMessage(true);
}
});
buttonCnt.add(cancel).add(submit);
d.add(nameLayeredLayout).add(emailLayeredLayout).add(FlowLayout.encloseCenter(buttonCnt));
d.show();
}
private void sendMessage(boolean updateUser) {
Map<String, String> params = new HashMap<>();
params.put("update_user",String.valueOf(updateUser));
params.put("sender_name", user.getName());
params.put("sender_email", user.getEmail());
params.put("sender_udid", Display.getInstance().getUdid());
params.put("subject", gui_Subject.getText());
params.put("message", gui_Message.getText());
MyNetwork.getInstance().getNetworkObject("POST", Constants.SEND_EMAIL, params, "noDialog");
Main.showDialog("Message sent.");
Home form = new Home();
MyToolbar.getInstance().setupToolbar(form);
form.show();
}
}
Here is the .gui for the form
<?xml version="1.0" encoding="UTF-8"?>
<component type="Form" layout="BoxLayout" boxLayoutAxis="Y" scrollableY="false" title="" name="Contact">
<component type="Container" layout="BorderLayout" borderLayoutAbsoluteCenter="true" uiid="welcomeContainer" name="welcomeContainer">
<component type="Label" uiid="welcomeLabel" text="Contact Us">
<layoutConstraint value="Center" />
</component>
</component>
<component type="Container" layout="BoxLayout" boxLayoutAxis="Y" name="BodyContainer">
<component type="Label" text=" " name="spacer1">
</component>
<component type="TextField" uiid="TextField" hint=" Subject" scrollVisible="true" columns="20" constraint="0" name="Subject">
</component>
<component type="TextArea" uiid="TextField" hint=" Please enter a brief message" rows="10" columns="20" maxSize="1000" constraint="0" name="Message">
</component>
<component type="Button" text="Submit" textPosition="2" name="SubmitButton" actionEvent="true">
</component>
</component>
</component>
Here are the relevant lines from theme.xml (uiid is set to TextField)
<gradient key="TextArea.bgGradient" color1="0" color2="0" posX="0.5" posY="0.5" radius="1.0" />
<val key="TextArea.bgType" value="0" />
<border key="TextArea.border" type="image" i1="TextField.borderTop_1.png" i2="TextField.borderBottom_1.png" i3="TextField.borderLeft_1.png" i4="TextField.borderRight_1.png" i5="TextField.borderTopL_1.png" i6="TextField.borderTopR_1.png" i7="TextField.borderBottomL_1.png" i8="TextField.borderBottomR_1.png" i9="TextField.borderCenter_1.png" />
<val key="TextArea.fgColor" value="0" />
<font key="TextArea.font" type="ttf" face="0" style="0" size="0" name="native:MainRegular" family="native:MainRegular" sizeSettings="3" actualSize="3.0" />
<val key="TextArea.marUnit" value="2,2,2,2" />
<val key="TextArea.margin" value="1.0,1.0,1.0,1.0" />
<val key="TextArea.padUnit" value="2,2,2,2" />
<val key="TextArea.padding" value="0.0,0.0,2.0,1.0" />
<gradient key="TextArea.press#bgGradient" color1="0" color2="0" posX="0.5" posY="0.5" radius="1.0" />
<val key="TextArea.press#bgType" value="0" />
<border key="TextArea.press#border" type="image" i1="TextField.borderTop_1.png" i2="TextField.borderBottom_1.png" i3="TextField.borderLeft_1.png" i4="TextField.borderRight_1.png" i5="TextField.borderTopL_1.png" i6="TextField.borderTopR_1.png" i7="TextField.borderBottomL_1.png" i8="TextField.borderBottomR_1.png" i9="TextField.borderCenter_1.png" />
<val key="TextArea.press#fgColor" value="0" />
<font key="TextArea.press#font" type="ttf" face="0" style="0" size="0" name="native:MainRegular" family="native:MainRegular" sizeSettings="3" actualSize="3.0" />
<val key="TextArea.press#marUnit" value="2,2,2,2" />
<val key="TextArea.press#margin" value="1.0,1.0,1.0,1.0" />
<val key="TextArea.press#padUnit" value="2,2,2,2" />
<val key="TextArea.press#padding" value="0.0,0.0,2.0,1.0" />
<val key="TextArea.press#transparency" value="0" />
<gradient key="TextArea.sel#bgGradient" color1="0" color2="0" posX="0.5" posY="0.5" radius="1.0" />
<val key="TextArea.sel#bgType" value="0" />
<border key="TextArea.sel#border" type="image" i1="TextField.borderTop_1.png" i2="TextField.borderBottom_1.png" i3="TextField.borderLeft_1.png" i4="TextField.borderRight_1.png" i5="TextField.borderTopL_1.png" i6="TextField.borderTopR_1.png" i7="TextField.borderBottomL_1.png" i8="TextField.borderBottomR_1.png" i9="TextField.borderCenter_1.png" />
<val key="TextArea.sel#fgColor" value="0" />
<font key="TextArea.sel#font" type="ttf" face="0" style="0" size="0" name="native:MainRegular" family="native:MainRegular" sizeSettings="3" actualSize="3.0" />
<val key="TextArea.sel#marUnit" value="2,2,2,2" />
<val key="TextArea.sel#margin" value="1.0,1.0,1.0,1.0" />
<val key="TextArea.sel#padUnit" value="2,2,2,2" />
<val key="TextArea.sel#padding" value="0.0,0.0,2.0,1.0" />
<val key="TextArea.sel#transparency" value="0" />
<val key="TextArea.transparency" value="0" />
<gradient key="TextField.bgGradient" color1="0" color2="0" posX="0.5" posY="0.5" radius="1.0" />
<val key="TextField.bgType" value="0" />
<border key="TextField.border" type="image" i1="TextField.borderTop_1.png" i2="TextField.borderBottom_1.png" i3="TextField.borderLeft_1.png" i4="TextField.borderRight_1.png" i5="TextField.borderTopL_1.png" i6="TextField.borderTopR_1.png" i7="TextField.borderBottomL_1.png" i8="TextField.borderBottomR_1.png" i9="TextField.borderCenter_1.png" />
<val key="TextField.fgColor" value="0" />
<font key="TextField.font" type="ttf" face="0" style="0" size="0" name="native:MainRegular" family="native:MainRegular" sizeSettings="3" actualSize="3.0" />
<val key="TextField.marUnit" value="2,2,2,2" />
<val key="TextField.margin" value="1.0,1.0,1.0,1.0" />
<val key="TextField.padUnit" value="0,2,0,2" />
<val key="TextField.padding" value="0.0,0.0,2.0,1.0" />
<gradient key="TextField.press#bgGradient" color1="0" color2="0" posX="0.5" posY="0.5" radius="1.0" />
<val key="TextField.press#bgType" value="0" />
<border key="TextField.press#border" type="image" i1="TextField.borderTop_1.png" i2="TextField.borderBottom_1.png" i3="TextField.borderLeft_1.png" i4="TextField.borderRight_1.png" i5="TextField.borderTopL_1.png" i6="TextField.borderTopR_1.png" i7="TextField.borderBottomL_1.png" i8="TextField.borderBottomR_1.png" i9="TextField.borderCenter_1.png" />
<val key="TextField.press#fgColor" value="0" />
<font key="TextField.press#font" type="ttf" face="0" style="0" size="0" name="native:MainRegular" family="native:MainRegular" sizeSettings="3" actualSize="3.0" />
<val key="TextField.press#marUnit" value="2,2,2,2" />
<val key="TextField.press#margin" value="1.0,1.0,1.0,1.0" />
<val key="TextField.press#padUnit" value="0,2,0,2" />
<val key="TextField.press#padding" value="0.0,0.0,1.0,1.0" />
<val key="TextField.press#transparency" value="0" />
<gradient key="TextField.sel#bgGradient" color1="0" color2="0" posX="0.5" posY="0.5" radius="1.0" />
<val key="TextField.sel#bgType" value="0" />
<border key="TextField.sel#border" type="image" i1="TextField.borderTop_1.png" i2="TextField.borderBottom_1.png" i3="TextField.borderLeft_1.png" i4="TextField.borderRight_1.png" i5="TextField.borderTopL_1.png" i6="TextField.borderTopR_1.png" i7="TextField.borderBottomL_1.png" i8="TextField.borderBottomR_1.png" i9="TextField.borderCenter_1.png" />
<val key="TextField.sel#fgColor" value="0" />
<font key="TextField.sel#font" type="ttf" face="0" style="0" size="0" name="native:MainRegular" family="native:MainRegular" sizeSettings="3" actualSize="3.0" />
<val key="TextField.sel#marUnit" value="2,2,2,2" />
<val key="TextField.sel#margin" value="1.0,1.0,1.0,1.0" />
<val key="TextField.sel#padUnit" value="0,2,0,2" />
<val key="TextField.sel#padding" value="0.0,0.0,1.0,1.0" />
<val key="TextField.sel#transparency" value="0" />
<val key="TextField.transparency" value="0" />
Here is a screenshot of the Theme Designer showing padding for Selected TextField UIID. Padding in millimeters is also applied to unselected and pressed. Both components share this UIID but the padding is only appearing on the text field component, not the text area component. This behavior does not change if the lines that I added in the code to set padding are present or not.
You see in the screenshot that left and right are both in mm while top/bottom are in pixels. I also set it so that all four units are mm and it did not change the behavior.
(We are using CN1 v4.0)
To resolve the issue, I ended up doing the following:
Reverted my project to a prior commit that did not have any padding styling for TextArea or TextField
In the Theme Designer I edited the padding on each state one-by-one instead of copying the styling from one state to another.
I am suspecting but cannot say for certain that the issue was caused by the act of copy/pasting the styling in the Theme Designer. AFAIK that is the only difference between the working and non-working versions of the styling. I seem to recall running into issues when doing copy/paste in the designer in the past.
setPaddingLeft(1); would override setPadding(1,1,1,1); and visa versa. You need to make sure that you do these things before the form is shown and if you do them after you need to revalidate as this will impact layout.
However, in your case I'm guessing you need to invoke setPaddingUnit(Style.UNIT_TYPE_DIPS); to make sure that padding is in a visible unit. Make sure to invoke that before the setPadding call.
Form hi = new Form("Padding", BoxLayout.y());
TextArea unpadded = new TextArea("Unpadded");
TextArea padded = new TextArea("Padded");
Style s = padded.getAllStyles();
s.setPaddingUnit(Style.UNIT_TYPE_DIPS);
s.setPadding(6, 6, 6, 6);
hi.addAll(unpadded, padded);
hi.show();
I am new to javaFX and FXML, I have created a fxml with few checkbox's and submit button (both are inside a tab called "test tab").
How do I get only enabled checkbox values and/or text and/or fx:id's and while click on submit button.
below the fxml.
<?xml version="1.0" encoding="UTF-8"?>
<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.collections.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.effect.*?>
<?import javafx.scene.image.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.paint.*?>
<?import javafx.scene.shape.*?>
<?import javafx.scene.text.*?>
<?import javafx.scene.web.*?>
<AnchorPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/8.0.45" xmlns:fx="http://javafx.com/fxml/1" fx:controller="application.MainViewController">
<children>
<TabPane fx:id="tabPane" layoutX="7.0" layoutY="6.0" prefHeight="389.0" prefWidth="589.0" tabClosingPolicy="UNAVAILABLE">
<tabs>
<Tab text="Test tab">
<content>
<AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="180.0" prefWidth="200.0">
<children>
<Button fx:id="submit" layoutX="450.0" layoutY="283.0" mnemonicParsing="false" onAction="#dsubmit" text="SUBMIT" />
<CheckBox fx:id="dbox1" layoutX="46.0" layoutY="30.0" mnemonicParsing="false" onAction="#someaction" text="First Checkbox" />
<CheckBox fx:id="dbox2" layoutX="46.0" layoutY="65.0" mnemonicParsing="false" onAction="#someaction" text="Second Checkbox" />
<CheckBox fx:id="dbox3" layoutX="46.0" layoutY="105.0" mnemonicParsing="false" onAction="#someaction" text="Third Checkbox" />
<CheckBox fx:id="dbox4" layoutX="46.0" layoutY="140.0" mnemonicParsing="false" onAction="#someaction" text="Fourth Checkbox" />
<CheckBox fx:id="dbox5" layoutX="46.0" layoutY="178.0" mnemonicParsing="false" onAction="#someaction" text="Fifth Checkbox" />
<CheckBox fx:id="dbox6" layoutX="46.0" layoutY="218.0" mnemonicParsing="false" onAction="#someaction" text="Sixth Checkbox" />
</children>
</AnchorPane>
</content>
</Tab>
</tabs>
</TabPane>
</children>
</AnchorPane>
Not quite sure exactly what you are asking, but in your dsubmit() method you can just do
if (dbox1.isSelected()) {
// ...
}
if (dbox2.isSelected()) {
// ...
}
or something similar.
If you want a list of the selected check boxes you could do something like
List<CheckBox> selectedBoxes =
Stream.of(dbox1, dbox2, dbox3, dbox4, dbox5, dbox6)
.filter(CheckBox::isSelected)
.collect(Collectors.toList());
experimenting with AngularJS and D3 I'm trying to figure out on how to drag & drop svg elements from one svg to another one. Do you have any hints or experiences on how to do that?
Regards,
Andi
An Example would be to drag a circle from the right square and drop it onto the left square. The examples source is on github.
I hve done this with javaxcript. Maybe you can use some of its features. It works in IE and Chrome. FF is in the process of implimenting the needed intersection list method.
This example below shows dragging elements and dropping them into the various viewPorts(SVG roots).
Uses matrix transforms. It can seamlessly drag/drop elements that have previously been transformed and reside it different viewPorts. It employs getScreenCTM, createSVGTransform and binds the element to a transform List
Each viewport target is determined by using an SVGRect object and employes checkIntersection.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Drag and Drop Into Viewports</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body style='padding:10px;font-family:arial'>
<center>
<h4> Drag and Drop Into Viewports</h4>
<div style='width:90%;background-color:gainsboro;text-align:justify;padding:10px;border-radius:6px;'>
This example shows dragging elements and dropping them into the various viewPorts(SVG roots).
Uses matrix transforms. It can seamlessly drag/drop elements that have previously been transformed and reside it different viewPorts. It employs <b>getScreenCTM</b>, <b>createSVGTransform</b> and binds the element to a <b>transform List</b>
Each viewport target is determined by using an <b>SVGRect</b> object and employes <b>checkIntersection</b>.
</div>
<table>
<tr><td align=left>
<b>Scenerio:</b><br />
A The parent SVG root(mySVG) with viewBox=0 0 400 400.<br />
It contains the the draggable red circles. The white circles are inside the rect viewPorts<br />
1.) The blue rect element is contained in, and fills, its own svg root<br />
3.) The maroon rect element is contained in, and fills, its own svg root.<br />
4.) The orange rect element is contained in, and fills, its own svg root<br /> with viewPort=10 10 50 50.<br />
<br />
(View the SVG Source to verify where the circles are being dropped.)
</td>
<td align=left>
<div id="svgDiv" style='background-color:lightgreen;width:400px;height:400px;'>
<svg id="mySVG" width="100%" height="100%" viewBox="0 0 400 400">
<svg overflow="visible" width="100" height="100" x="20" y="60" pointer-events="all" id="blueSVG" >
<rect id="blueRect" x="0" y="0" width="100" height="100" fill="blue" stroke="black" stroke-width="2" />
<circle onmousedown=startDrag(evt) onmousemove=drag(evt) onmouseup=endDrag(evt) fill="white" cx="20" cy="20" r="15" />
</svg>
<svg overflow="visible" width="100" height="100" x="280" y="60" pointer-events="all" id="maroonSVG" >
<rect id="maroonRect" x="0" y="0" width="100" height="100" fill="maroon" stroke="black" stroke-width="2" />
<circle onmousedown=startDrag(evt) onmousemove=drag(evt) onmouseup=endDrag(evt) fill="white" cx="20" cy="20" r="15" />
<circle onmousedown=startDrag(evt) onmousemove=drag(evt) onmouseup=endDrag(evt) fill="white" cx="60" cy="20" r="15" />
</svg>
<svg overflow="visible" width="100" height="100" x="120" y="200" viewBox="10 10 50 50" pointer-events="all" id="orangeSVG" >
<rect id="orangeRect" x="0" y="0" width="100" height="100" fill="orange" stroke="black" stroke-width="2" />
<circle onmousedown=startDrag(evt) onmousemove=drag(evt) onmouseup=endDrag(evt) fill="white" cx="20" cy="20" r="15" />
</svg>
<svg id="WrapperSVG" />
<circle onmousedown=startDrag(evt) onmousemove=drag(evt) onmouseup=endDrag(evt) fill="red" cx="40" cy="30" r="15" />
<circle onmousedown=startDrag(evt) onmousemove=drag(evt) onmouseup=endDrag(evt) fill="red" cx="80" cy="30" r="15" />
<circle onmousedown=startDrag(evt) onmousemove=drag(evt) onmouseup=endDrag(evt) fill="red" cx="120" cy="30" r="15" />
<circle onmousedown=startDrag(evt) onmousemove=drag(evt) onmouseup=endDrag(evt) fill="red" cx="160" cy="30" r="15" />
<circle onmousedown=startDrag(evt) onmousemove=drag(evt) onmouseup=endDrag(evt) fill="red" cx="200" cy="30" r="15" />
<circle onmousedown=startDrag(evt) onmousemove=drag(evt) onmouseup=endDrag(evt) fill="red" cx="240" cy="30" r="15" />
<circle onmousedown=startDrag(evt) onmousemove=drag(evt) onmouseup=endDrag(evt) fill="red" cx="280" cy="30" r="15" />
<circle onmousedown=startDrag(evt) onmousemove=drag(evt) onmouseup=endDrag(evt) fill="red" cx="320" cy="30" r="15" />
<circle onmousedown=startDrag(evt) onmousemove=drag(evt) onmouseup=endDrag(evt) fill="red" cx="360" cy="30" r="15" />
</svg>
</div>
</td>
</tr></table>
<br />SVG Source:<br />
<textarea id=svgSourceValue style='font-size:110%;font-family:lucida console;width:90%;height:400px'></textarea>
<br />Javascript:<br />
<textarea id=jsValue style='border-radius:26px;font-size:110%;font-weight:bold;color:midnightblue;padding:16px;background-color:beige;border-width:0px;font-size:100%;font-family:lucida console;width:90%;height:400px'></textarea>
</center>
<script id=myScript>
var TransformRequestObj
var TransList
var DragTarget=null;
var Dragging = false;
var OffsetX = 0;
var OffsetY = 0;
//---mouse down over element---
function startDrag(evt)
{
if(!Dragging) //---prevents dragging conflicts on other draggable elements---
{
DragTarget = evt.target;
//---bring this viewPort to top---
if(DragTarget.ownerSVGElement!=mySVG)
mySVG.appendChild(DragTarget.ownerSVGElement)
//---bring this element to top---
DragTarget.ownerSVGElement.appendChild(DragTarget)
//---reference point to its respective viewport--
var pnt = DragTarget.ownerSVGElement.createSVGPoint();
pnt.x = evt.clientX;
pnt.y = evt.clientY;
//---elements transformed and/or in different(svg) viewports---
var sCTM = DragTarget.getScreenCTM();
var Pnt = pnt.matrixTransform(sCTM.inverse());
TransformRequestObj = DragTarget.ownerSVGElement.createSVGTransform()
//---attach new or existing transform to element, init its transform list---
var myTransListAnim=DragTarget.transform
TransList=myTransListAnim.baseVal
OffsetX = Pnt.x
OffsetY = Pnt.y
Dragging=true;
}
}
//---mouse move---
function drag(evt)
{
if(Dragging)
{
var pnt = DragTarget.ownerSVGElement.createSVGPoint();
pnt.x = evt.clientX;
pnt.y = evt.clientY;
//---elements in different(svg) viewports, and/or transformed ---
var sCTM = DragTarget.getScreenCTM();
var Pnt = pnt.matrixTransform(sCTM.inverse());
Pnt.x -= OffsetX;
Pnt.y -= OffsetY;
TransformRequestObj.setTranslate(Pnt.x,Pnt.y)
TransList.appendItem(TransformRequestObj)
TransList.consolidate()
}
}
var ViewPortTarget
//--mouse up---
function endDrag(evt)
{
Dragging = false;
//--which viewPort is the element over ?---
var isBlueSVG = mySVG.checkIntersection(DragTarget, BlueObjRect)
var isOrangeSVG = mySVG.checkIntersection(DragTarget, OrangeObjRect)
var isMaroonSVG = mySVG.checkIntersection(DragTarget, MaroonObjRect)
if(isBlueSVG)
ViewPortTarget=blueSVG
else if(isOrangeSVG)
ViewPortTarget=orangeSVG
else if(isMaroonSVG)
ViewPortTarget=maroonSVG
else
ViewPortTarget=mySVG
ViewPortTarget.appendChild(DragTarget)
var pnt = DragTarget.ownerSVGElement.createSVGPoint();
pnt.x = evt.clientX;
pnt.y = evt.clientY;
//---elements in different(svg) viewports, and/or transformed ---
var sCTM = DragTarget.getScreenCTM();
var Pnt = pnt.matrixTransform(sCTM.inverse());
Pnt.x -= OffsetX;
Pnt.y -= OffsetY;
TransformRequestObj.setTranslate(Pnt.x,Pnt.y)
TransList.appendItem(TransformRequestObj)
TransList.consolidate()
svgSourceValue.value=svgDiv.innerHTML
}
//---build the viewPort intersect rect obj---
var BlueObjRect
var OrangeObjRect
var MaroonObjRect
function setViewportRect()
{
WrapperSVG.appendChild(blueSVG)
var bb=WrapperSVG.getBBox()
var bbx=bb.x
var bby=bb.y
var bbw=bb.width
var bbh=bb.height
BlueObjRect=mySVG.createSVGRect()
BlueObjRect.x=bbx
BlueObjRect.y=bby
BlueObjRect.width=bbw
BlueObjRect.height=bbh
mySVG.insertBefore(blueSVG,WrapperSVG)
WrapperSVG.appendChild(orangeSVG)
var bb=WrapperSVG.getBBox()
var bbx=bb.x
var bby=bb.y
var bbw=bb.width
var bbh=bb.height
OrangeObjRect=mySVG.createSVGRect()
OrangeObjRect.x=bbx
OrangeObjRect.y=bby
OrangeObjRect.width=bbw
OrangeObjRect.height=bbh
mySVG.insertBefore(orangeSVG,WrapperSVG)
WrapperSVG.appendChild(maroonSVG)
var bb=WrapperSVG.getBBox()
var bbx=bb.x
var bby=bb.y
var bbw=bb.width
var bbh=bb.height
MaroonObjRect=mySVG.createSVGRect()
MaroonObjRect.x=bbx
MaroonObjRect.y=bby
MaroonObjRect.width=bbw
MaroonObjRect.height=bbh
mySVG.appendChild(maroonSVG)
mySVG.insertBefore(maroonSVG,WrapperSVG)
}
</script>
<script>
document.addEventListener("onload",init(),false)
function init()
{
setViewportRect()
svgSourceValue.value=svgDiv.innerHTML
jsValue.value=myScript.text
}
</script>
</body>
</html>