I have looked at the available libraries that are available and none seem to do exactly what I want.
I want to be able to produce a tree layout/flow chart which is horizontal.
Here is a very basic image:
Each box will have a parent and it needs to be able to flow automatically as I provide the data.
Another sample is this:
Automatic layouts is a strong domain of the (commercial) yFiles Graph Drawing Libraries.
Specifically yFiles for HTML provides the feature you are looking for in the browser:
You can customize the layout - in your case I suggest to use GenericTreeLayouter with layoutOrientation set to LEFT_TO_RIGHT and with a socalled DefaultNodePlacer configured for your nodes. Set the rootAlignment to LEADING and configure the preferred routing style. (documentation)
You can incrementally add new elements to the graph and have it animate smoothly
You can style the visualization to your exact requirements.
I believe this interactive demo shows many of the requirements, but there are also more complex demos that show the flow-charting aspect of your question.
Disclosure: I work for the company that creates that library, but I do not represent my employer on SO. My posts and thoughts are my own.
I would take a look at the following libraries:
JSPlumb
This has a hierarchy option that I think is what you're looking for. Here is the Demo.
mxgraph
that's a screenshot of pyhole!
That was done using KineticJS, a defunct project that provides abstraction on top of HTML canvas. Each oval was positioned manually/absolutely by doing a little math on the layout of the map/chain.
Related
I'm looking for a way to convert from SKETCH to HTML and CSS,
I'm hoping I could then fix the whole code to better suit my needs and add some JS to it.
Outsourcing
If you want to outsource, there are a lot of outsourcing development company for that, such as ReliablePSD or HTMLPanda
Sketch Plugins
There is few sketch plug-in to do so, but the generated code is unstructured with absolute positions
SaaS Tools
There are several SaaS tools or editors, but we have tried and found it's not easy to use. There're also few tools for App (react native & flutter)
If the tools help you to automated generate the code, then there might be possible messy or wrong structure because it's hard to decide the right responsive behavior only by the one screen of the visual design.
We have challenged this problem and after a few iterations of the development and analysis. We find the root cause of the messy code is because of the wrong structure.
The wrong structure is because most of the tools try to guess or use the existing Sketch group structure which is intended for visual, not for responsive layout.
So our solution decides to leave those key problems for users but provide a very quick and intuitive way to code web by the visual editor. In our early experiment, it indeed much faster but you still need to do basic editing in order to export the structure and quality code. (React or HTML/CSS).
There is Launchpad a tool to generate website from sketch file. (not completely free)
That said converting from Sketch (or other design tools) is a manual thing. If you right-clickon layer you can use Copy CSS Attributes which will help you get the CSS needed to reproduce in browser (it's not always perfect)
You can use Desech Studio to import you sketch file to get the converted html/css. But the conversion will not be pixel perfect because it will try to nest elements and position them with css grids. So you still have to adjust the margins and sizes afterwards.
There are other tools, but I haven't found anything that positions elements with flex or grids. They use position absolute instead, which is pretty hard to work with when doing the responsiveness.
I believe we have better solution in 2022 for this question.
Before, conversion tools use "absolute position" and wrong group structure to produce messy code.
You can use pxCode plugin (figma to html) which can produce clean and responsive code.
How pxCode works?
require users to SmartGroup to ensure the HTML structure is 100% correctness which is crucial for the responsive behaviors.
use CSS flex and flow content rather than absolute position
pxCode allows users to adjust responsive settings based on the structure in flexible ways which can control CSS quality by using MediaQuery
Furthermore, pxCode support React and TailwindCss also if you would like to use.
I'm using Polymer 1.x and started using the Polymer Kit to build a current app. I know about the App-Elements, and currently I'm trying to achieve something like this:
Full:
Mobile:
So far I have something like this:
Do I need to use media queries to hide the tabs and show the logo?
On a side note, I'm really having a hard time understanding Polymer, because I don't know if the elements come with the predefined styles (as Bootstrap or Foundation would do) or you need to do some heavy-lifting in CSS (which is what I've been seeing). I would really appreciate if someone could show me a good tutorial (I've seen Polycasts and the Github) on how to fit things together!!
You can use iron-media-query to hide the tags.
All the polymer elements have predefined styles and have exposed certain mixins and variables for custom styling.
I would recommend going through polymer's documentation and element's documentation to best understand its usage as each element has its own set of properties and styling. Polycasts cover only a few topics and are good source of knowledge only if you are already familiar with polymer development.
My question is about migration from Flex3 to HTML5. I want do migrate myself not application actually. The question is, what direction is the best and most similar to flex knowledge. Maybe I will reimplement some custom components I already have in my flex library. I think that some of useful flex components I will have to implement myself in HTML5 - e.g. AdvancedDataGrid or Tree.
Now I can see 2 possibilities:
assume page (or big DIV) as application master class, and implement
other components based on extending DIV functionality - and placing
DIV in DIV in DIV - like AS3 uses UIComponent. It gives me supported
by browser environment event handling or DIV movement and redrawing
etc.
assume one CANVAS component as application master class. Build own
classes tree with owner drawing control etc. I think i will need to
implement event handling & dispatching for my internal visual
components. Also all UI actions (like moving, redrawing) I need to
implement myself.
I assume, that I will start to build my own class/component library for long-term future use. Question is what is better for knowledge and work investing?
It will be good to know wide opinion on this problem.
Can you give yours here?
From experience, we can say that writing a DataGrid component is a VERY large undertaking. We've been working on our DataGrid components for 3 years now, and we're STILL adding features. Instead of writing your own ADG like component, you should consider JS frameworks. Below are some:
DOJO (Excellent framework for RIA Enterprise App Development, and
Free!)
Sencha (Pretty good, but commercial)
JQuery (Very popular, but highly fragmented).
Each of these come with their own grid component. Senchas grid is pretty good, but so are some jquery grids. See this for example: Best dynamic JavaScript/JQuery Grid
Bottom line, dont reinvent the wheel. There are many excellent paid and free versions out there, pick one that works for you and run with it.
Disclaimer: I am author of Web Atoms JS
Web Atoms JS was built to bring all concepts of Flex, Silverlight and XUL. And each of these technologies used more of XML markup for very high level UI controls. Screens become complex and visualizing them becomes painful when it keeps on changing.
With Web Atoms you will write for less code then any of other frameworks. Web Atoms comes with all basic flex Components & more are coming.
This is a Sample of what all things are possible in Web Atoms JS.
Here is link to documentation.
http://webatomsjs.neurospeech.com/docs
This might be a general question, but I can't seem to figure it out. What are containers in DNN? Skins are essentially a layout plus a colour scheme for the whole portal. So are containers the skin for desktopmodules?
Sorry if this question is novice. I am not confident in DNN yet, and am reading the doco. However i need this answer quite quickly.
Cheers.
Containers allow you to add style and markup to any module independently of the page skin or the particular module.
The layout goes like this:
Default.aspx
Skin (.ascx control, either the
Portal default or selected on the
given tab) - this has panels on it
Container (.ascx control, this can allow you position some edit
buttons and have a configurable wrapper around any module)
Module (.ascx control, usually coming from /DesktopModules)
I hope this helps,
-Eric
Yes, container is like a skin for single module. Using one skin for entire page, and several skins (container skins) for modules you can quicker create expected appearance.
In general this is a simple html snippet with several placeholders.
jQuery provides a browser neutral library for accessing and manipulating the DOM. This is good.
However I'm looking for a counterpart for the visual side of things - I need to build pixel measured interfaces, without wasting so much time testing and correcting cross browser issues (buttons having crazy margins in IE, or using the wrong box model in FireFox. The many IE and otherwise instances where putting several elements on one line screws up alignment or floats).
Basically I need to be able to plan out interfaces on paper with exact pixel dimensions (for example all textboxes should be exactly 22px high), and then easily translate those designs into Html. In a WinForms world, this is usually straight forward. With html it's anything but, and I find it's worst when it comes to input controls.
What libraries or collections could I use to make this sort of design a reality (outside of just converting everything into Silverlight where that degree of control exists). Javascript is required to be on (AJAX to begin with), so libraries can depend on it entirely for controls.
Some of the components I'm looking for in a uniform style with precise pixel control
Buttons
Textboxes
Dropdowns
ComboBoxes (Dropdown whose text can be edited directly)
Toggle Buttons
Alternatives include dojo (pure-JS) and GWT (JS generated from Java). Some may argue that ditching JS altogether and going with the Flash-backed Flex is a good option.
Also check out ExtJS. I've used this one extensively and I can vouch for how good it is. Originally it was a fork of the Yahoo UI Library (YUI), which Soviut mentioned. Personally, I think it's much better and more usable than the original YUI.
JQuery UI is a good extension of JQuery that allows for rich controls like dialogs, drag and droppables, etc.
The Yahoo Interface Library is another toolset you can use that may be closer to what you were originally asking for.