Below is the industrial plan of a warehouse with all machines and sections there in the ware house . I need to draw an interactive plan as below and all the sections are clickable . For eg: in below image there is a section godown I need to make it clickable so that when user clicks it he/she can see details i.e. it takes to another page of or so. Can anyone let me know if there are any framework that can let me draw a dynamic and interactive plan such as above.All data are from database.
Due to you asking for recommendations, you're only going to get biased answers, but here goes anyway:
I'd personally suggest the powerful D3JS, as it has a lot of examples, a helpful community and most (if not all) features you are looking for.
Related
Hello,
I'm relatively new to the programming world and I was wondering how I would go about creating the following for a website I'm designing. I will use a random example as to not give my application away, but the process should be the same. I apologize ahead of time for the unrealistic values:
Say a civil engineer wants to come onto my website and figure out the mechanical stress at certain points on the Eiffel tower, lets say on the corner of the first/second observation deck (see Image). To make this more general, they want to vary values such as the height and base width of the tower to see how that affects the mechanical stress at those points.
Now, I can make the algorithm for calculating those stress values. My question is, how would a programmer go about creating this dynamic figure, such that the 'stress values' are shown on the image at distinct locations, and they change based off of the values of the user inputs + algorithm? My thoughts are the following:
Use HTML/CSS to place the images and design the webpage
Use JavaScript to take inputs, run the algorithm and calculate outputs. This would also make the dynamic changes on the image.
I have zero experience with JavaScript (I'm okay with HTML/CSS as I have built my own website before). I guess I'm hoping to be pointed in the right direction before I go off and start learning the wrong language for this application.
Bonus Challenge
While they're doing this, it would be nice to see a visual representation of the Eiffel tower change when the height and base area are changed. ie if you make the base way wider and the height much shorter, the bending in the midsection is going to be much more apparent. Obviously, this means I wouldn't be using a picture, but actually a vector-image model of the Eiffel tower that would change based off of the inputs. So what language and what libraries would one use to go about making this sort of things?
Thank you to anyone that can provide some insight on my issue. I really appreciate it!
Mike
Hello to integrate dynamic graph in a webpage there are two ways;
First you need to make your own graph library. For that you need to know SVG well to make a good looking graph.
Second, you can use any existing library. There are lot of open source libraries are there some of them are free to use also. To integrate graph using those libraries is not much difficult.
Some examples of graph generating library morris chart, c3.js etc. Google search 'll give you more detail idea.
As you said you have no idea about javascript so it will be a bit difficult at first for integrating graph. But 'll definitely much more easy to make your own graph library.
To give a background of what the user interface for the application I am creating does:
I am designing a sort of dashboard for a list of people who clocked into work on a particular day. The basic design is the names of people will be on slices of a donut chart, when they clock into work on a day, their slice color will change from red to green indicating that they are in work today. The user of the dashboard will also be able to click or hover over one of the slices to have it expand and show more detailed information about the person (more text).
I have the back-end of my sample application ready to serve data to be displayed by a UI, but I am not sure how I should go about designing this. What I am asking is if there are any JavaScript frameworks that would make this easy to implemented. I already looked at a bunch of tools such as Google Charts, ,ChartJS, and D3.js, but that seems more focuses on displaying actual numerical data rather than textual which is what I am going for.
Any suggestion into frameworks or technologies would be appreciated, thank you.
You could consider using Raphael as charting library.
While D3 is much more powerfull, it comes with a a bit steeper learning curve. IMO using Raphael will get you quickly started.
I hope it helps
I am working on my first project as a Junior UX/UI Designer. I'm actually a seasoned software engineer but I wanted to expand my design skills so I took a position doing design work.
I'd like to know if this modal window is as my senior puts it pixel-perfect.
I'm a beginner at photoshop. Ive been using the info tool and measuring the pixels. I'm fairly confident that my calculations are correct for pixel measurements.
Like I said I'm a beginner at this sort of work so if there's anything you need like pixel measurements I've calculated I will gladly provide the information.
Also, I'd like to know if anyone has any enhancements they could share.
Thanks!
Default Rendering (picture link)
Basic Rendering (picture link)
The Modal Form (picture link)
Use this chrome extension to match your design with the picture mockup.
Pixel Perfect Extension
For UI/UX recommendations, Please post the questions on http://ux.stackexchange.com
Argh, sorry! not enough reputation yet to comment.. :(
Your design looks really cool! I liked that!
But somethings I think you could try to see how it fits are:
When you type the text, you kinda lose the label of the field.. It's cool when you don't have anything typed, but I guess having labels for each field would be better
I would strectch the separator to go until the bottom of the height and weight, and in the bottom would be a blank space with only the buttons.. (in this case only one)
Similarly, the line in the between, I'd put to start only on the fields and let the title clear..
Not sure if you can do that, but putting some icons for facebook, twitter would be nice! :)
Not sure if it will look better, but maybe if you align left the label "Height" and the value itself align right, it might look better with "Weight" as they have different size..
These comments are not authoritative answers -- IMO there's rarely such a thing in UX. Also, I do realize that my answers float between directly addressing your mockup as graphic design and it's implications on subsequent HTML implementation. I think both efforts must consider the other.
I cannot see what you're planning in actually coding the form, but do not forget accessibility. For example, provide <label>s for your fields. Even if you want to hide the labels for a certain aesthetic, they should exist as hidden for screen readers, etc. If you do not want visible labels in general, I would at least consider having them on the two righthand side fields. Immerse yourself in the user's experience. If you return to edit your profile, the only way you'll know the purpose of a field is to delete the value. Yuck. I believe that using placeholders as labels is a mistake. Consider using labels as labels and using placeholders as example values or very simple instructions for the expected format.
Where lists are not overly long and the choice is a common one, I prefer radio buttons or checkboxes. I'm specifically referring to the gender select list. If you're planning on using only two items in that select list, consider
a () Male () Female set of radios.
Short sliders with a lot of fine-grained values can be difficult, especially with accessibility in mind. You want a good breadth of pixel sliding for each value change, otherwise that suave slider becomes a point of frustration for any user.
Over all, I like the minimalist look.
I'm sure subsequent comments and answers will disagree with mine. The question to always ask is: what will serve your client and/or end-users the best? What will give them the most positive UX?
Here is my requirement:
I need to create a visualization of links between different representations of a person. The image below I think indicates that fairly clearly.
Additionally, those rectangles would also contain some data about that representation of a person (such as demographics and the place). I also need to be able to handle events when clicking on the boxes or the links between them, as a sort of management tool (so, for example, double clicking a link to delete it, or something along those lines). Just as importantly, since the number of people and links will varies, I need it to be displayed by spacing out the people in a roughly equidistant fashion like the image shows.
What would be a javascript library that could accomplish this? I have done some research and have yet not found something that can cleanly do this but I'm hardly an expert in those libraries.
Here are the ones I've looked at:
Arbor js: Can dynamically create the spacing and links of the graph but I'm responsible for rendering all the visuals and there's really no hooks for things like clicking the links.
jsPlumb: Easily create connections between elements and draws them nicely enough but doesn't seem to address any layout issues. Since I don't know how many people will be on the screen, I have to be able to space them out equidistant and that doesn't seem to be a concern of jsPlumb.
D3.js: This creates a good visualization with the spacing I need but I don't see how I can show the data inside each node or do things like like mouse events on the links or box.
I'm feeling a bit lost so I'm hoping someone could point me to something that could help me or maybe point me to an example from one of these libraries that shows me that what I want is possible.
I ended up using Arbor with Raphael as my rendering library and it's worked out very well.
Take a look at Dracula Graph Library. It's a simple library that seems to do both layout as well as rendering graphs (using Raphael under the hood). It's a bit underdeveloped however.
I'm looking for a way to create an interactive bullet graph, which will allow the user to click anywhere in the graph and set a marker, then calculate some simple values based on where this marker is at. For example, I'd like it to look similar to this:
http://www.usrecordings.com/test-lab/bullet-graph.htm
Yet, allow the user to click inside it and have it calculate values. I don't want the user limited to the axis values either, it should be able to figure out what the value is between them. Has this been done anywhere before or do I need to start something from scratch?
Flot may be able to do what you need.
Check out some of the examples, particularly the interactive one. It's open source, so you can add any functionality you need to it. This should be a good starting point.
HTML canvas is a great place to start. A brief google search showed there may not be many interactive charts available. These are a couple HTML canvas examples, the first being math, the second the w3c spec: Polynomials, HTML Canvas w3c. I've found that searching for HTML canvas game examples produce many more tutorials than straight HTML canvas examples. I don't know what your programming abilities are, so I'm giving you these links with the assumption you have javascript experience.
Have fun.
Oh and thanks for asking if it's been done before.