What UI is used on this pictures? (node based ui) - eclipse

I'm wondering what UI library is used on the images below (it's from CityEngine). Does anyone know other UI libraries with similar capabilities (free floating, connected nodes with arbitrary UI elements)?
I think it might be a part of Eclipse/JFace/SWT toolkit.
or:

In particular from your second sample it does indeed seem to be Eclipse/JFace/SWT. To be sure about how it gets that particular graph-like look you'd have to see the source, but my guess is it might use GEF: http://eclipse.org/gef

While the surrounding UI is implemented with Eclipse/JFace/SWT, the editor is not implemented with SWT or GEF but with a custom non-public library based on OpenGL.
I found a stack trace where you can clearly see that no SWT/GEF/Draw2D code is involved:
http://forums.esri.com/CityEngine/forum-30031.html.txt
The rendering code lives in the package org.corebounce.lib3d2.

Related

Dynamic Chart using Xamarin Forms

I am newbie in Xamarin; I know there must be ready components for what I need, already I searched but not yet found.
I need to create a dynamic graphic like this:
http://www.highcharts.com/demo/dynamic-update
I wore this in PhoneGap (html5 + JS), but now I'm moving to Xamarin forms and would like to know if any third component is what I need or I'll have to do everything from scratch.
Thank you.
I'm currently looking into graphing too and OxyPlots seems to be a pretty good line graph tool. I don't think it supports dynamic updating so you'd have to program it to update manually when new data points come available.
I've not gotten round to actually using this myself but I thought I'd post this here in case it works for you.
Edit: Here's a list of examples. Also you can add it to your project using nuget so it should be easy to set up.
I'm using Syncfusion controls for Xamarin.Forms and I'm satisfied with it. They also have a free license for individual developers and small businesses.
For dynamically updated Xamarin charts SciChart offers an extremely high performance solution. With the SciChart Xamarin Chart control you can draw up to a million points, zoom, pan and scroll big datasets interactively.
Check out performance demos here:
https://www.scichart.com/example/xamarin-chart-realtime-fifo-scrolling-chart-example/
https://www.scichart.com/example/xamarin-chart-performance-demo-example/
https://www.scichart.com/example/xamarin-chart-ecg-monitor-demo-example/
Disclosure: I am the tech lead on the SciChart Xamarin project

Creating a responsive design using CQ5 templates

I'm investigating Adobe CQ5 and would like any advice on how to integrate its drag-and-drop UI to create a responsive website. It seems as if it works on a concept of fairly bland templates with components that can be dropped in pretty much anywhere, including things like "three-column control" - which would make designing a responsive grid structure very hard (as it would be hard to prevent users from dropping in a control that could ruin the layout).
Does anyone have any experience or advice on this? I'm really looking for deep technical details on the structure of templates vs components (paragraphs), and where/how to manage to the CSS.
CQ5 offers ways to control what can be done within a template, so thinking that components "can be dropped in pretty much anywhere" may be misleading. Page templates are designed and configured so that you control which components can be added to a certain area of a page. This allows you to only make those components available that will work with the template layout, excluding components that would wreck the layout. Then authors are only allowed to use things that will work. If they attempt to drag a component onto a paragraph (parsys) where that component has not been configured as available, the UI will not allow them to use it there. So CQ actually makes it easy to prevent users from dropping a control somewhere that would ruin the layout.
This is outlined a bit here:
http://dev.day.com/docs/en/cq/current/howto/components_develop.html#Adding%20a%20new%20component%20to%20the%20paragraph%20system%20%28design%20%20%20%20%20mode%29 which states that
"The components can be activated (or deactivated) to determine which
are offered to the author when editing a page."
When it comes to CSS and JavaScript, you can create a client library and then include the relevant client library on the page. Backend CQ functionality will take care of combining multiple CSS (or JavaScript) files into a single minified file to allow for a single HTTP request of an optimized file. This it outlined a bit here:
http://dev.day.com/docs/en/cq/current/developing/widgets.html#Including%20the%20Client-Sided%20Code%20in%20a%20Page as well as
http://dev.day.com/docs/en/cq/current/howto/taglib.html#%3Ccq:includeClientLib%3E
So you might develop several components that share a client library, then when any of the components is added to a paragraph the client library will be included on the page. You may also want a CSS library that applies to all the templates to give a common look and feel, yet allow components to add their own when they are used.
These guidelines for using templates and components outline how you provide control, yet flexibility:
http://dev.day.com/docs/en/cq/5-5/developing/developing_guidelines_bestpractices.html#Guidelines%20for%20Using%20Templates%20and%20Components
I'll document our successful WIP experience with RWD and CQ5
Assumptions:
A well documented style guide.
Our First Steps:
Modified existing column control component css to utilize twitter bootstrap grid css.
Create a base page property allowing two different classes on the grid container to be set and inherited by child pages. (container||container-fluid).
Leverage out-of-the-box components where ever possible.
All component widths inherit the width of their parent container allowing for components to be dropped into any location within a template.
Issues:
The out-of-the-box column control component can not be nested.
We are looking into building a custom column control component.
Takeaways: this is an evolutionary project and we are constantly iterating.
With the recent launch of AEM 6.0, they have an example website called as Geomatrixx Media. This website is responsive.
You can take this example as reference and start building on top of it.

GWT Image Cropping

I'm building a website using GWT and would like to add Image Cropping capability so users can upload their profile image and then crop it as they need to. I'm looking for something similar to Jcrop but in GWT.
I found THIS and THIS code samples how to crop an image on the client side but there is no UI part where user can select part of their image that needs to be cropped.
There were also couple of similar questions on SO (for example and this GWT with Jcrop) but nobody gave an example of the selection part of the image that uses pure GWT.
If you have an idea how to do it please share and I'm sure other people will leverage from this in the future.
Here is the example of what I'm looking for:
I recommend that you take route #1. I've been working full time in GWT for awhile and spend a lot of time looking for libraries, and this is one that I just don't think exists yet.
Here are your options:
Wrap Jcrop using a JSNI interface.
Pros: You have to include JQuery and JCrop, which are small and robust
Cons: Learning how to build your first JSNI wrapper can be a pain
Build your own from GWT Drag and Drop
Pros: "Pure GWT"
Cons: You probably won't handle all the edge cases that JCrop has figured out over time, nor be as featureful.
Port JCrop to GQuery
Pros: JCrop is open source and only around ~1600 lines of code
Cons: It's ~1600 lines of code, which is likely to be much bigger when ported to Java
If you decide to do any of the above, please open source it! I'd be happy to contribute, and it looks like something that I could use in my GWT projects as well.
GWT Cropper is a widget that allows cropping an image.
https://code.google.com/p/gwt-cropper/
Edited in 2015: as long as Google Code is about to be closed, the project has been moved to GitHub. The new address is https://github.com/w32blaster/gwt-cropper

WebGL framework - what's the best choice? X3DOM?

I'm about to start a Web application that will use interactive generated 3D content. Aim is to let it run natively in the browser, i.e. no Flash is allowed, only JavaScript + HTML5.
Apart from using pure WebGL it's better to use a lib that will offer a more high level interface.
The approach of X3DOM looks great for me - and it looks like it's supposed to become native in the browser and the lib will pave the road.
But after my first impressions I'm not sure if it's lightweight enough. Apart from the 400kb JS-File it slows down Firefox.
The features I need are not many. The whole scene set up could be easily done by "hand". But I need user interaction including to figure out where the user clicks. And later I want to be able to load and insert 3D objects in a common file format.
PS: Browsers of choice are Firefox and Webkit based ones. Desktop and Mobile ones. I don't care about IE.
PPS: Yes, I know the question: WebGL Framework
X3DOM is great when you come from an X3D background (and developed by great people), but if you have no preference watsoever, Three.JS would be my pick.
I looked at most WebGL frameworks just last week, and it indeed seems almost every one of them is in the 300kB range. That's too heavy for me, too. Luckily I found lightgl.js which has everything you need to get started in 28kB, MIT license.
The main thing for me is just abstracting canvas, shader and texture initialization. But lightgl.js does also have some mouse handling and model loading etc.
i think the decision boils down to:
do you want to have a more design or programmer approach.
x3dom: its leveraging of x3d for describing the scene lends itself to a more designer approach, with just the adding of the x3dom css and js one can do this :
<X3D><Scene><Shape><Box/></Shape</Scene></X3d>
three.js: only allows for scene generation through javascript, and a lot of additional code is necessary just to set up the canvas. view the source of this simple box example: http://stemkoski.github.com/Three.js/Template.html
neither way is wrong, i prefer designing the scene and then using js when needed for any computations.

Windowbuilder Pro - selectedElement binding not working

Following a tutorial trying to learn Windowbuilder Pro and running into some problems.
I have a list of an object, and want to create a binding function so that that when I've selected an object in the list, the corresponding objects name will appear in a button.
This type of operation never works for me. No object-specific options appear in the "selectedElement" column, just .
If I try to bind say a button to a specific beans property, it works well.
The documentation for Windowbuilder is so sparse I didn't think of anywhere else to turn.
Greatly appreciate any help with solving the problem or resources for learning Windowbuilder indepth.
I should point out the WindowBuilder docs on Swing Data Binding are expressly intended to document how to use the WB tools and not how to use the Swing Data Binding API itself. In fact, WindowBuilder expects you to have a fairly good grasp of Swing Data Binding fundamentals before you can effectively use the tools it provides.
Based on your question, it sounds like you need to create an as described in the WB docs here. To understand what an is and how to use it, you should refer to the Swing Data Binding docs themselves.
The bottom line is that, if you know how to create the Swing Data Bindings that you need by hand (in source), you should be able to more rapidly create then using WindowBuilder. WB strives to expose the Swing DB API in as pure a form as possible (warts and all). We have intentionally tried to expose the full power of the DB API without adding any simplification layer on top of it. The downside is that, if you are new to the Swing DB API and don't know how it all is intended to work, WB will not help you or teach you how to use it.