Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 7 years ago.
Improve this question
I'm exploring possibilities for automating browser content tests. WebDriver is something I'm looking at; also, PhantomJS / CasperJS. It appears easy enough to test for the presence of text content, or of a particular element. However, what I need is rather more complex. For instance:
Need to be able to determine whether text in one element overlaps a bounded area on the screen.
Need to be able to test for visibility of an element--not merely that it's not set as "hidden" but also that it's not covered up by another element.
Need to be able to verify correct layout of elements; e.g., that an image is displayed to the right of a block of text, rather than below it.
What it comes down to is the ability to automate the inspection of a Web application to make sure it looks and behaves as it's supposed to. Are the tools I've mentioned the right sort for this, and will they do what I need?
WebDriver handles "covered up", but not the other criteria you're looking for. You might find Fighting Layout Bugs interesting, though, as it tries to deal with exactly those.
I will propose you to use Web Driver with java and Sikuli api with java for visual testing. They can work together. You can make Webdriver to find elements by id and sikuli to find elements and locate their position by image, Also you can use Sikuli OCR to extract text from images and asserting it later, but OCR is not very reliable
Related
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 8 months ago.
Improve this question
I want to make a tree view structure in React JS. I already use the package "goJS" but I am facing some issues in it. As the price of this package is very high so I can't purchase it.
The issue is that whenever I minimize the parent node it shifts to the left side and also I am unable to inspect the tree view.
I am also attaching the screenshot of my desired structure. Also I am performing some basic actions on each node and minimizing and expanding each node.
Can anybody please help out !
enter image description here
You can use MUI for your tree view structure.
https://mui.com/material-ui/react-tree-view/
Good luck.
At my job we implemented a similar view within our react front-end app using #visx/hierarchy, which is based on d3-hierarchy. I suggest you check the examples, they have some similar results than the image you linked, especially on the link types example.
Be aware that it's not an "out-of-the-box" solution, it'll require some work to obtain the exact result you want but the library will make it easier to compute the various nodes positions in a hierarchical layout.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 2 months ago.
Improve this question
I am looking for an approach or Javascript library that I can use to build a scientific modeling application. I suppose this is analogues to the way flowcharting software like Visio works. Add elements and connect them with click and drag.
I need to be able to define certain elements and add them to the "canvas" by selecting the element and dragging them onto the canvas.
When I click on an element I need to be able to set certain parameters for that element.
I also need to be able to connect one element to another by clicking on one and dragging a line to the second element.
I am looking for some advise on the best javascript library or approach to use. I will probably build the app in Vue.js as I have some experience using it.
Given a bit more complicated feature set, I've opted for mxgraph (the draw.io library). It's old, it's heavy, it's complicated, it's written in vanilla javascript, and to make it work with Vue you'll probably need to write the integration yourself. But it works, and there is light at the end of the tunnel.
Most important parts for me were: custom complex shape support (like, with groups, and "handles" - you know, these yellow dots you use to "adjust" some shape pieces in Visio for example), undo/redo, save/load, print.
joint.js ("rappid" now) may be my second bet if mxgraph won't cut it (not sure how it compares, but the feature list includes the items I needed)
There is also always an option to do it all with plain javascript; you have basic libraries like svg.js, snap.svg, etc that would allow that. moving shapes with drag-drop is no problem even with plain javascript. But in this case connector routing and undo/redo would be on you, and that's a bit harder.
If you find something better than these options please let me know!
btw, Visio Online does not support custom shapes at all now.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 6 years ago.
Improve this question
I would like to find a js library that allow me to do similar things as same as gmail:
They got a textarea, when you typing it, it search things and provide a list of contract list for you to choose from, when you tab it, it becomes a separate element, you can delete it by pressing the X. I know it is not come with textarea, or standard html element, how can I describe / search related lib on the web? Any keywords ideas?
stackexchange tags and Pinterest filters work similarly.
I did a google search with
"tags interface" filter
I searched both normal and images.
The images quickly allow you to focus in on an interface.
For example, the jQuery plugin Bootstrap Tags Input jumped out.
A further search on the following brought up more google images which seem right on.
"Tags Input"
I suggest this is better suited for the UX - User Experience StackExchange site. There is one discussion I found here
Good luck. I will likely write something myself in the not too distant future. It is a user friendly interface.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 5 years ago.
Improve this question
Does anyone have experience with a JavaScript library for Augmented Reality?
If so, can you recommend one?
EDIT:
Not sure how to better clarify this... By Augmented Reality I mean using device webcam (laptop, smartphone, tablet) and overlapping elements over the video feed on screen. Ofen, the overlapping is done based on a marker the algorithm searches for within each frame and makes calculations about its position in space.
Hope that's enough.
Thanks.
I think this is what you might be looking for. JSARToolkit is a direct port of Flash FLARToolkit from Ilmari Heikkinen. Great tutorial you may also want to check out and a link to the Git repo.
http://weblog.bocoup.com/javascript-augmented-reality/
https://github.com/kig/JSARToolKit
You can try skarf.js, a framework that I have created for handling JavaScript augmented reality libraries in Three.js.
It currently integrates JSARToolKit and js-aruco, so you can easily switch between these two libraries to decide on the more suitable one to use.
This framework takes care of a number of things for you, including automatic loading of models when the associated markers are detected (association is specified in a JSON file). There is also a GUI marker system which allows users to control settings using AR markers.
Integration with Three.js is just one line of code to create a Skarf instance and another line of code to update.
There are videos, live demos, source codes, examples and documentation available. Check out http://cg.skeelogy.com/skarfjs/ for more info.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 2 years ago.
Improve this question
There are several (very good) rich text web editors written in Javascript (eg FCKeditor, YUI Texteditor and many many others).
However I couldn't find any tutorial on how to build such a component. Something that would explain both high-level considerations (architecture) and/or more details in low-level "critical" points (ie why do most of the editors out there use iFrame, how do you handle keyboard input like Ctrl-B, Ctrl-C when the text is selected and when it is not etc)
My main motivation is curiosity; if I had to develop such an editor today I wouldn't know where to start from.
Does anyone know of any tutorial that covers the above issues (ideally, something that explains how to build a wysiwyg editor from scratch)?
After more research I found the following. The functionality for building a rich-text-editor is already implemented at the browser. IE was the first to create such an API and Firefox replicated it.
Overview
The main point is that the javascript object "document" has a property called designMode which can be set to "on". This converts all the page to to a textarea-like component. Imagine that the browser opens the page the same way that MS-Word would: the user can see the formatting but he can also type in the page (normally the browser opens a page as readonly).
window.document.designMode = "On";
Because the above affects all the web page, most editors use iFrames so that the editable area is only the iFrame which has it's own document object.
On top of that, there is an API that allows easy javascript access to styling. This is exposed throw the execCommand() method. For example you can call from Javascript
document.execCommand('bold', false, '');
and the selected text will become bold.
Tutorials
I have found the following:
A brief step by step guide.
A mozilla guide. It has the most convenient API reference I have found and also some more links.
A guide by microsoft.