klausschaefers / quant-ux Goto Github PK
View Code? Open in Web Editor NEWQuant-UX - Prototype, Test and Learn
License: GNU General Public License v3.0
Quant-UX - Prototype, Test and Learn
License: GNU General Public License v3.0
Given that Quant UX is a web application, the Affero GPL v3, which is the same as the GPL v3 except it extends the copyleft to software published over the network, would seem more fitting for the project.
I have made a table that contains a list of items (the list could be arbitrarily long in the real app). I chose "Selectable" and "Show checkbox". In simulation, the user is able to click more than one checkbox. Is it possible to restrict this to a single selection? In other words, more like a radio button than a checkbox group. (BTW, I want to thank you again for all the work you have put into this tool -- it's really super!)
(For clarification on the scroll down and up: I have natural scrolling enabled on the mouse wheel. When disabling it, it inverts for every app listed below including Quant, still making it the odd one out.)
The common standard among apps / platforms seems to be Ctrl + scroll down to zoom in (that is, make the image larger). This works with e.g.: Inkscape, Penpot, Google Maps (there without Ctrl as they use scrolling for zooming), and to zoom any sort of website generally.
In Quant, this direction seems to be reversed: Ctrl + scroll down zooms out, and Ctrl + scroll up zooms in, which is quite unexpected.
Copying an item gives a bug.
Replicating the screen gives a bug.
Replicating components also gives bugs.
I made a group with rectangle, icon and texts (the element on the right)
When I turn it into a symbol, and want to use this symbol, the new AND the old "groups" vanish (like the item on the left, I added a red border around it because we almost don't see it)
(Don't mind white rectangles, I had to hide some data ahah)
It also happened to me when hitting CTRL-Z (my normal group element became like this)
Nothing particular in console logs
Following your great tutorials, I try to call a mockup REST API (https://6041e60f7f50e000173ab43e.mockapi.io/api/v1/animals) to fulfill the test https://www.youtube.com/watch?v=9Ex8do5vWaY
However, I get:
Console:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://6041e60f7f50e000173ab43e.mockapi.io/api/v1/animals. (Reason: header ‘authorization’ is not allowed according to header ‘Access-Control-Allow-Headers’ from CORS preflight response).
14:54:54.802 Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://6041e60f7f50e000173ab43e.mockapi.io/api/v1/animals. (Reason: CORS request did not succeed).
Hi!
This is the best open source prototyping tool I have ever seen, but at the moment I have encountered a huge problem.
When I use a tool to generate a prototype product, how do I get the static resources of this prototype product, because I want to generate an apk project through static resources, or do you have any other suggestions to generate an apk file?
Thank you for your job, and answer!
Widgets on a screen do not have initial values in their databinds. The user always needs to interact at least once with an widget to have a value bind. This makes some interactions for the testing user not intuitive and unnatural.
Thanks for your work!
Hi @KlausSchaefers , Is there any plan to add Graphql service the same as rest service?
It'd be great to be able to zoom in and out using the trackpad.
I'm using Firefox 77 under macOS and it doesn't work.
By setting up lines and selecting "Sticky ruler", my header is not stuck to the top of the page as I scroll the page.
I have placed a label inside a first screen, in the same way I created a table inside it, the elements have not been copied inside the second screen but outside of it. I have tried to delete them but it is not possible. It indicates that it is associated with my master file, even enabling editing it cannot be deleted.
Using
Google Chrome in Linux
Hi!
Fist of all, thank you for your amazing idea!
Is there any way to make not just group, like component in figma? I mean when I modify a group, the others can inherit the component position change inside the group or label or more?
Thank you for your job, and answer!
Hi @KlausSchaefers , Is there any plan to add customizable header setting for Rest service?
Currently it only supports to set auth token. That would be very helpful if it supports to add other customized headers - and supports to set header key or value from a model variable. e.g.:
Also it would be great to support so in Luisa vue library.
I have already updated your services folder's all js files by adding my API URL like
signup (data) { return this._post('https://api.prototype.tikweb.com:8080/rest/user', data) }
But I am not getting the project creating option after login. I am getting the error "Uncaught (in promise) TypeError: Failed to fetch"
The 'web service' service component cannot be triggered when the page is refreshed. You must click trigger on the previous screen to transfer the data to the next screen, so the list cannot be self rendered
look forward to your reply
Hi!
Both on safari and on chrome in iOS (iOS 14, iPhone 12 mini) there is a problem with the operation of the fixed option. The items disappear when the page is not on top on the previous screen.
https://www.quant-ux.com/#/test.html?h=a2aa10aKcnZPyhzQpPeW4SUMD8L0ylH9sxVzaulQxMmPOKIEERRbaZNbP8Yi
It's working properly on my local server but when I build it and put the project on my server and try to log in I am getting the error "Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0"
VM75:1 Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0
Promise.then (async)
(anonymous) @ AbstractService.js:128
Promise.then (async)
(anonymous) @ AbstractService.js:126
value @ AbstractService.js:120
(anonymous) @ UserService.js:29
f @ runtime.js:63
(anonymous) @ runtime.js:293
(anonymous) @ runtime.js:118
r @ asyncToGenerator.js:3
s @ asyncToGenerator.js:25
(anonymous) @ asyncToGenerator.js:32
(anonymous) @ asyncToGenerator.js:21
t @ app.b380976f.js:1
(anonymous) @ LoginPage.vue:71
f @ runtime.js:63
(anonymous) @ runtime.js:293
(anonymous) @ runtime.js:118
r @ asyncToGenerator.js:3
s @ asyncToGenerator.js:25
(anonymous) @ asyncToGenerator.js:32
(anonymous) @ asyncToGenerator.js:21
login @ LoginPage.vue:68
ne @ vue.runtime.esm.js:1854
n @ vue.runtime.esm.js:2179
Zo.i._wrapper @ vue.runtime.esm.js:6917
I'd like to export my current prototype to include it in my own git repository.
With so i can have some sort of versioning on my quant-ux prototype and can return to or view a certain previous version if needed to.
Thanks for your work!
Photos don't load when I try to create a flow. I'm getting a 404 error. The photo link looks incomplete.
Hi,
Quant-UX is an awesome tool! I was wondering whether it's possible to integrate it with external tools/websites or if that's a planned feature, since I am planning on building a larger scope application, which involves prototyping apps as a feature, and it would be great to be able to integrate Quant-UX in this project, since it's so rich and powerful!
Congrats for building it, and many thanks for making it open source! ❤️
The bottom scrollbar is always full with, no matter of the property or layer panels are open or not. They should be updated
When I am importing a sketch file into the online ui, then it is importing only a few items. What's the reason for this behavior?
Hi ,
Quant is a helpful prototype tool for me to deal with many problems in my work , I have following questions while handling project problems:
It would be very appreciating if you can give me some directions in time, Thanks
First of all awesome work on this. I can see the data is all transmitted to https://v1.quant-ux.com, if I need this data is there any way of exporting/exposing it?
I would like to extend the functionality to include exposing designs via an API which I can then parse on clients.
Hello,
is there a way to compare two databinding variables with each other when using the logic operator.
As far as i can see there is only the possibility to compare a variable with a "hardcoded" value.
Thanks and great work so far!
Hi,
first of all let me say that this is the most amazing set of prototyping tools i've seen, especially FOSS.
I would like to see the transform dialogue box be able to take mathematical operations. This is accepted in Affinity tools and since I switched there it became a part of my everyday design.
To illustrate what I'm talking about,
If I have a H: 100 W: 200
box, going to H and typing 150%
or 100 * 1.5
should give me 150
as the ending transform on H.
Hey. First of all, I would like to say that this is a pretty impressive prototyping application. Thank you for making it and open sourcing it.
I'm trying out Quant-UX for mocking up and prototyping pages in a pretty table-intensive app.
And here is a more run-of-the mill table:
And here is a simple one:
(I know, the visual design is not exactly exciting.)
But I'm having trouble getting tables in Quant-UX to look like that.
If all I wanted to do was wireframing, this would be fine, but then I'd use pen and paper or maybe a simpler application. When trying out Quant-UX I expected to be able to replicate the look and feel of the existing application and it's styles. (I was able to do this for buttons relatively easily.)
I'm also a bit inspired by this article on enterprise tables. I think it should be possible to make all the visual table designs that they enumerate.
Some of these problems make simply wireframing table-heavy designs more difficult as well. (I've marked them 🏁)
So here's a list of table-related enhancements/feature requests/bugs:
Regarding performance:
I'm using a relatively new Intel NUC and the Vivaldi browser (so basically Chromium) and Linux.
And again thank you for making Quant-UX. 🙏
I want to do some easily logic. for example, I have a ComboBox that can I hide another element on the current screen.
Hello, My name is Guilherme, Im Braziliam developer and Im trying to use Quant-Ux with Vue.js.
When Im try to convert the test project to Vue Js qith "quant-ux" command, I get the error bellow :
Quant-UX: Start generating code! V 2.0.1
Quant-UX: Load config <.quant-ux.json>
{}
Quant-UX: Generate <Vue (Deprecated)> for prototype
Not supported type : vue (deprecated)
/usr/local/lib/node_modules/quant-ux-cli/lib/cli.js:22
var files = generator.run(app, conf);
^
TypeError: Cannot read property 'run' of undefined
at generate (/usr/local/lib/node_modules/quant-ux-cli/lib/cli.js:22:25)
at Request._callback (/usr/local/lib/node_modules/quant-ux-cli/lib/cli.js:82:9)
at Request.self.callback (/usr/local/lib/node_modules/quant-ux-cli/node_modules/request/request.js:185:22)
at Request.emit (events.js:198:13)
at Request. (/usr/local/lib/node_modules/quant-ux-cli/node_modules/request/request.js:1154:10)
at Request.emit (events.js:198:13)
at IncomingMessage. (/usr/local/lib/node_modules/quant-ux-cli/node_modules/request/request.js:1076:12)
at Object.onceWrapper (events.js:286:20)
at IncomingMessage.emit (events.js:203:15)
at endReadableNT (_stream_readable.js:1145:12)
Data grid component prevents data-binding with rest service. The data-binding works well outside the the "grid" component - but anything inside the grid component will not pass in bound data points.
Example of Issue: https://quant-ux.com/#/share.html?h=a2aa10aWt2ZPH6eODIrFOnOmMey2yU60IydOuSecpXPgFn5y9oKqyFh6VinC
https://arco.design/
How can I import arco design system?
Hello @KlausSchaefers, all good?
Is there an easy way to prototype the app to be responsive?
tks !!!
Hello!
OK, as you might know, I'm a student (cinema and new media) and I'd like to collect reviews from my class about my design in QuantUX (might be future customers for you too! 😄 ).
To do that, I think of buttons on a master page (like, dislike, average, ...) that POST (using your REST service) to my home server (NR).
but I'm getting error:
Of course domain name and path are valid, not mydomain.com and posturl.
I'm sure my service works, I tested it with postman.
Hello,
When I try to delete a comment in my prototype (editing mode), it does nothing.
In the console of the dev tools i have this error :
AbstractService.js:202 Uncaught (in promise) Error: Could not delete
at AbstractService.js:202
(anonymous) @ AbstractService.js:202
Promise.then (async)
r @ asyncToGenerator.js:13
s @ asyncToGenerator.js:25
(anonymous) @ asyncToGenerator.js:32
(anonymous) @ asyncToGenerator.js:21
onDeleteComment @ Comment.vue:416
(anonymous) @ lang.js:24
So here is the piece of code from AbstractService.js
_delete(url, successCallback, errorCallback, header) {
return new Promise((resolve, reject) => {
fetch(url, {
method: 'delete',
headers: this._createDefaultHeader(header)
}).then((res) => {
if (res.status === 200) {
res.json().then(j => {
this.logger.log(6, '_put', 'exit ')
if (successCallback) {
successCallback(j)
}
resolve(j)
})
} else {
this.onError(url, res)
if (errorCallback) {
errorCallback(new Error('Could not delete ...'))
}
reject(new Error('Could not delete'))
}
}).catch(function (err) {
if (errorCallback) {
errorCallback(err)
}
reject(new Error('Could not delete'))
})
})
}
I'm using QUANT-UX on https://quant-ux.com/
Thanks;
Suppose I have a table with "Selectable" enabled. Is there a way to set the "selected" value through databinding? I can echo the selected value (the number of the row, starting with 0) to another field through databinding, but it doesn't seem to work in the other direction. There also isn't a way to preset the selected status of a table row, so I can't easily simulate this by just setting the selections the way I want them in a hidden table and swapping the view.
When trying to use 'All Fields Valid" to validate a form that is overlayed on top of a screen that has another form, toggling 'All Fields Valid' in the overlayed screen also checks the validity of the underlying screen's inputs. A way to somehow change this behavior would be nice.
I'm emulating the navigation of an existing web app so our designers and testers can see new proposed features (reports and charts) within that context. Our navigation and some reports use images in tree menu items and to display cellular data in some reports. We use a Table widget for the report data and a Tree widget for sidebar navigation. So what I'd like to be able to do is make a widget's position dependent on the position and scroll value of another widget. That would allow me to display icons and other graphics within the sidebar and report tables, and the graphics would move appropriately to match the other content.
I guess another alternative would be to allow styling within text fields, which would enable icon fonts to be used within the cells of tables or the menu entries of trees. I don't know which would be more work to implement.
the svgeditor is not used.
can I del it?
I can login and signup and also can view my existing works. But when I try to upload an image it shows me the error.
N.B: I have my own setup for both front-end and back-end.
https://prototype.tikweb.com/#/
Look forward to your reply !
You know dojo is so old and dojo is not dev.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.