I am blind, and I have trouble making nice looking guis. This really frustrates me because while I am a capable developer, I cannot complete projects on my own because I am unable to make the front-end. I am wondering if any of you know of some automatic solution which produces professional looking guis? They don't have to be fancy, most of the time we are talking about basic forms/wizzard style layouts. I basically need to get away from specifying pixel heights, widths, and positions. I need something that figures out how to make things match in terms of sizes and positions in relation to one another, resize well, etc. My primary target platform is Windows. I have worked with WxWidgets before and have been very satisfied, but I needed to hire another person to do the design which I cannot keep doing longterm. I have no problem writing code, I just am not able to effectively figure out how to position and set the size for controls on the form.
Any advice would be appreciated.
I doubt there could ever be a perfect substitute for someone with keen eyesight, a passion for the work and lots of time to devote to dragging and dropping, pushing and pulling at the the widgets of a GUI until everything is just so.
However, if you are satisfied with a workaday solution that gets the job done, then I think that the wxWidgets sizers do a reasonable job. Are you familiar with these? Specify how much space you want to leave around your widgets, and whether you want them arranged vertically or horizontally. Now all you have to do is add your widgets in order to the sizer, and the sizer will automatically arrange them in an often quite decent first pass sort of way.
As a simple example, here is a simple form.
The code:
wxPanel * panel = new wxPanel(this,-1,wxPoint(-1,-1),wxSize(1000,1000));
wxSizerFlags szrflags(0);
szrflags.Border(wxALL,5);
wxBoxSizer * szrCRUDForm = new wxBoxSizer(wxVERTICAL );
wxFlexGridSizer * szr = new wxFlexGridSizer(2,1,1);
wxStaticText * field1text = new wxStaticText(panel,-1,"Entry Field #1");
wxTextCtrl * field1ctrl = new wxTextCtrl(panel,-1," ");
wxStaticText * field2text = new wxStaticText(panel,-1,"Second Entry Field");
wxTextCtrl * field2ctrl = new wxTextCtrl(panel,-1," ");
wxStaticText * field3text = new wxStaticText(panel,-1,
"A very big entry field\n"
"with a lot of description\n"
"Spread over several long lines of text");
wxTextCtrl * field3ctrl = new wxTextCtrl(panel,-1,"",wxPoint(-1,-1),wxSize(600,-1));
wxStaticText * field4text = new wxStaticText(panel,-1,"Yet another Field");
wxTextCtrl * field4ctrl = new wxTextCtrl(panel,-1," ");
szr->Add( field1text,szrflags );
szr->Add( field1ctrl,szrflags );
szr->Add( field2text,szrflags );
szr->Add( field2ctrl,szrflags );
szr->Add( field3text,szrflags );
szr->Add( field3ctrl,szrflags );
szr->Add( field4text,szrflags );
szr->Add( field4ctrl,szrflags );
wxBoxSizer * szrButtons = new wxBoxSizer( wxHORIZONTAL );
szrButtons->Add( new wxButton(panel,-1,L"CREATE"),szrflags);
szrButtons->Add( new wxButton(panel,-1,L"READ"),szrflags);
szrButtons->Add( new wxButton(panel,-1,L"UPDATE"),szrflags);
szrButtons->Add( new wxButton(panel,-1,L"DELETE"),szrflags);
szrCRUDForm->Add( szr );
szrCRUDForm->Add( szrButtons );
SetSizer(szrCRUDForm);
Produces the following GUI, without requiring any pushing or pulling
Here is an introductory, rather crude, tutorial http://neume.sourceforge.net/sizerdemo/
Here is something more sophisticated http://zetcode.com/tutorials/wxwidgetstutorial/layoutmanagement/
I am not sure what you mean by blind (Literal or figurative) but I will assume the later.
There is no replacement for imagination. Your imagination will always be what you want to achieve. Once you have it in mind you can sketch it in paper or using something like skencil.
Then you can use the tools for building the the GUI using wxWidgets. Few option are there and some of them are shown below.
I suggest wxFormbuilder or wxSmith if you want cross platform or even wxDevC++ if you want windows alone. If you can give few bucks then consider support DialogBlocks for is owned by one of wxWidgets core developers. wxCrafter looks promising but still in beta stage.
If you want to hire someone Vadim Zeitlin have such a nice company, consider to support another core developer.
wxFormBuilder
DialogBlocks
wxDevC++ Designer
Code::Block's wxSmith
XRCed Designer
wxDesigner
wxGlade
wxCrafter (In beta stage)
Related
still learning about Ruby + Sketchup!
Today,I would like to add a measurement (good english word ?) as I can do manually with the 'cotation' (french version) tool when I click to point then drag the measure text.
Can't find that in the docs to do with Ruby and API ...
Thanks for your help
You are probably looking for the Sketchup::Entities::add_dimension_linear method.
http://ruby.sketchup.com/Sketchup/Entities.html#add_dimension_linear-instance_method
Assuming a and b below are edges
voffset = [-20, 0, 0]
Sketchup.active_model.entities.add_dimension_linear(a.start, b.start, voffset)
The value of voffset controls not just how far offset the dimension is, but also the axis along which the measurement is made. You may need to experiment with different values to get a feeling for how that determination is done. As with many things in SketchUp, it often guesses (or 'infers') at what you want.
I need to create a tangram-like object, in which a user could be able to manipulate the structure, in order to create configurations as those you can see here.
I'm trying to understand which strategy would be best for writing the code with Three.JS, remembering that in the best case I would like to add physics.
I'm really new to WebGL, any advice would be helpful.
Thank you
http://codepen.io/livinglegendparagon/full/JKEZPa/
$sizeOfYourContainer: 1000;
$s: $sizeOfYourContainer;
$Area: sqrt($s * $s);
$a: $Area / 8;
$b: $Area / 4;
This has good links for the formula for a true tangram, this above formula will give you a and b values based off of how wide/height you want your container
I am migrating a THREE.js app from r60 to r70. Amongst other changes I notice that r60 constructs of the following form no longer work in r70.
mesh.position.set(0,0,0);
myVector3 = new THREE.Vector3 (100,200,300);
mesh.position = myVector3;
This applies to meshes, pointLights, presumably to all Object3D's but I havent tested further.
In the above example the mesh.position x,y,z values remain unchanged at (0,0,0). For illustration see this JSFiddle and compare lines 70 and 73.
//...The next line DOES NOT update Sphere_mesh.position.x
Sphere_mesh.position = NewPos_vector3;//...
//...The next line DOES update Sphere_mesh.position.x
Sphere_mesh.position.x = NewPos_vector3.x
In a debugger no console warning is given during execution that the assignment has not worked. In the very brief THREE.js migration notes for (r68 --> r69) I see something about an Object3D's position no longer being immutable but I don't know what that means.
Anyway, my question
Is there a standard THREE construct or function I can use to copy x,y,z values from a Vector3 object to the x,y,z values of a mesh.position rather than the effective, but verbose, form such as
mesh.position.x = myVector3.x;
mesh.position.y = myVector3.y;
mesh.position.z = myVector3.z; ?
e.g. something such as
mesh.position = F_Get_Object3DPosition_from_Vector3(myVector3); ?
I know it would be easy to write my own function but a standard THREE function would be more likely to evolve smoothly with future versions of THREE.
position beeing immutable means that the position property can not be changed.
so
mesh.position = anything;
won't work (but you already discovered this)
what you can do is not change the position, but you have to change position values.
in your case, the easiest way is
mesh.position.copy (myVector3);
I think you meant myVector3 not myVector3() in the last line... Anyway, I though that would work too but the thing is, you are applying a Vector to something that supposed to be a point/Vertex. Even if that worked in my opinion it wasn't the right way to do it. How about using a simple array:
mesh.position.set(0,0,0);
new_position = [100,200,300]
mesh.position.fromArray(new_position,0)
in which 0 is the starting index. So you can have multiple position sets in one array
I'd found a strange behaviour in joint rotation of collada object in SceneKit.
Imagine, I use this code for make rotating desk (complex form desk made in cheeta3d):
SCNScene *heroScene = [SCNScene sceneNamed:#"scene.dae"];
b = [heroScene.rootNode childNodeWithName:#"desk" recursively:YES];
b.physicsBody = [SCNPhysicsBody dynamicBody];
b.physicsBody.physicsShape=[SCNPhysicsShape shapeWithNode:b options:#{SCNPhysicsShapeTypeKey:SCNPhysicsShapeTypeConcavePolyhedron,SCNPhysicsShapeKeepAsCompoundKey:#YES}]; //**HERE we need YES only, if NO it is not rotating**!
[scene.rootNode addChildNode:b];
SCNPhysicsHingeJoint *joint = [SCNPhysicsHingeJoint jointWithBody:b.physicsBody axis:SCNVector3Make(0,1,0) anchor:SCNVector3Make(0,5,0)];
[scene.physicsWorld addBehavior:joint];
Look at comment //HERE we need YES only, if NO it is not rotating!
I tested all cases, all joints. SCNPhysicsShapeKeepAsCompoundKey must be YES although I think it is not so important here.
Why is it?
SCNPhysicsShapeKeepAsCompoundKey defaults to YES. From what I can tell that turns off the " flattenedCone " version of the physics object. Most likely you have something in your model that is keeping it from rotating when the hinge joint attaches to only one section of the model instead of the whole thing.
I have been asked to implement validation tests on the javascript part of our website. I've been considering using selenium WebDriver. One of the things we want to test is the UI: check whether it "looks" good (things that must be aligned are aligned, boxes are in the right position).
For the moment, the only option I found was to take a snapshot using Selenium, and either compare it to a test snapshot manually taken beforehand, or check the snapshots manually. The snapshot comparison is not very maintainable, as any change in the layout requires all the test snapshots to be taken again, and the manual check is very time consuming.
Does anyone know of any way (in Selenium or other) to achieve this?
It's not nice, but it can be done to some extent.
For positioning, you can use WebElement's getLocation() (Java doc, but the same method exists in all Selenium bindings). Note that most browsers render slightly differently, so do not expect things to be pixel-perfect when working with older IE. Also, things might be positioned slightly differently when e.g. the first font defined in CSS was not found and an alternative was used. Don't rely heavily on this method. But if you'll be able to make your tests sane and your environment stable, it will work.
For aligning, I wrote a simple Java method for WebDriver that asserts that an element is visually inside of another element.
There should be no false negatives, but there could be some false positives in the case when the inner element is visually inside, but its (invisible) actual borders "peek out". I haven't bumped into this problem, however, in my real experience, since nice websites behave nicely and don't need such hacks :). Still, it's kinda hackish and Selenium wasn't designed for this type of work, so it might be harder to implement more complex checks.
public static void assertContains(WebElement outerElem, WebElement innerElem) {
// get borders of outer element
Point outerLoc = outerElem.getLocation();
Dimension outerDim = outerElem.getSize();
int outerLeftX = outerLoc.getX();
int outerRightX = outerLeftX + outerDim.getWidth();
int outerTopY = outerLoc.getY();
int outerBottomY = outerTopY + outerDim.getHeight();
// get borders of inner element
Point innerLoc = innerElem.getLocation();
Dimension innerDim = innerElem.getSize();
int innerLeftX = innerLoc.getX();
int innerRightX = innerLeftX + innerDim.getWidth();
int innerTopY = innerLoc.getY();
int innerBottomY = innerTopY + innerDim.getHeight();
// assures the inner borders don't cross the outer borders
final String errorMsg = "ughh, some error message";
final boolean contains = (outerLeftX <= innerLeftX)
&& (innerRightX <= outerRightX)
&& (outerTopY <= innerTopY)
&& (innerBottomY <= outerBottomY);
assertTrue(errorMsg, contains);
}
If you use term validation in meaning: "Test that we have built the right thing", I would say it is nearly impossible to automate this. How will you judge if it looks pleasing or that it is easy to use, if not by having some people to really use it?
This kind of visual checks are also something humans are good at. If you use the website at all while developing it, you will notice quite easily if there is something fishy with the layouts and such.
For functionalities automated tests are good idea.