Sketch -> Form
-
I was wondering today, while drawing sketch of a form, if there is any tool that can use image processing to convert a drawing to generated code for a
XAML
orHTML
form. Drawing a sketch is very fast and much easier than dragging controls on a form and I guess it wouldn't be impossible to build something like an NN to process parts of a photo of an sketch to extract controls and generate a form based on them, although extracting handwritten text might not be that easy. Anyway, such a thing will save hours of work for many programmers in the world, I believe. Any prior attempt or any idea? -
I was wondering today, while drawing sketch of a form, if there is any tool that can use image processing to convert a drawing to generated code for a
XAML
orHTML
form. Drawing a sketch is very fast and much easier than dragging controls on a form and I guess it wouldn't be impossible to build something like an NN to process parts of a photo of an sketch to extract controls and generate a form based on them, although extracting handwritten text might not be that easy. Anyway, such a thing will save hours of work for many programmers in the world, I believe. Any prior attempt or any idea?The idea is not bad. Whatever, I suppose there would be a great effort to get something like that working, especially when you have to differ between similar controls (e.g. Panel, StackPanel, GridView etc.).
cheers Marco Bertschi
You have absolutely no idea how glad I am that I have no idea at all. - OriginalGriff I'm at peace with the world and myself. - Me
-
I was wondering today, while drawing sketch of a form, if there is any tool that can use image processing to convert a drawing to generated code for a
XAML
orHTML
form. Drawing a sketch is very fast and much easier than dragging controls on a form and I guess it wouldn't be impossible to build something like an NN to process parts of a photo of an sketch to extract controls and generate a form based on them, although extracting handwritten text might not be that easy. Anyway, such a thing will save hours of work for many programmers in the world, I believe. Any prior attempt or any idea?There is one tool I know of to do it, but I've not used it myself. It's called "an intern"
The universe is composed of electrons, neutrons, protons and......morons. (ThePhantomUpvoter)
-
There is one tool I know of to do it, but I've not used it myself. It's called "an intern"
The universe is composed of electrons, neutrons, protons and......morons. (ThePhantomUpvoter)
:-D
-
I was wondering today, while drawing sketch of a form, if there is any tool that can use image processing to convert a drawing to generated code for a
XAML
orHTML
form. Drawing a sketch is very fast and much easier than dragging controls on a form and I guess it wouldn't be impossible to build something like an NN to process parts of a photo of an sketch to extract controls and generate a form based on them, although extracting handwritten text might not be that easy. Anyway, such a thing will save hours of work for many programmers in the world, I believe. Any prior attempt or any idea?Hamed Mosavi wrote:
Anyway, such a thing will save hours of work for many programmers in the world, I believe.
No, not really. You could "sketch" a form, but then once it guesses at the controls you want, you would then have to go back and fix all the mistakes it made, naming the controls properly, double-checking partent-child relationships, nesting, blah, blah, blah, ..., pretty much wasting those very hours to tried to save. I can "sketch" a form, dragging and dropping controls faster than I can draw one. At least with dragging and dropping, I can make changes very easily without having to reach for the eraser or another sheet of papper and starting over.
A guide to posting questions on CodeProject[^]
Dave Kreskowiak -
I was wondering today, while drawing sketch of a form, if there is any tool that can use image processing to convert a drawing to generated code for a
XAML
orHTML
form. Drawing a sketch is very fast and much easier than dragging controls on a form and I guess it wouldn't be impossible to build something like an NN to process parts of a photo of an sketch to extract controls and generate a form based on them, although extracting handwritten text might not be that easy. Anyway, such a thing will save hours of work for many programmers in the world, I believe. Any prior attempt or any idea?Sketchflow[^] will do what you want, though you need to draw into the machine directly (32 mins into the vid).
“Education is not the piling on of learning, information, data, facts, skills, or abilities - that's training or instruction - but is rather making visible what is hidden as a seed”
“One of the greatest problems of our time is that many are schooled but few are educated”Sir Thomas More (1478 – 1535)
-
There is one tool I know of to do it, but I've not used it myself. It's called "an intern"
The universe is composed of electrons, neutrons, protons and......morons. (ThePhantomUpvoter)
Yeah, right. Everyone thinks doing UI is easy, so you might as well have the lowest dork on the totem pole do it. "Give it to the intern, it's not worth anyone else's time." That's why there are so many apps out there that are utter crap. Companies are so enamored of their underlying algorithm or process, they give the UI short shrift. No thought is given to how things should be presented, what controls should be used, or even the vocabulary for the on-screen text. In case you're wondering, I do UI's for our products. The reason I do them is no one else had the stones wanted to do the job. :sigh:
Software Zen:
delete this;
-
Yeah, right. Everyone thinks doing UI is easy, so you might as well have the lowest dork on the totem pole do it. "Give it to the intern, it's not worth anyone else's time." That's why there are so many apps out there that are utter crap. Companies are so enamored of their underlying algorithm or process, they give the UI short shrift. No thought is given to how things should be presented, what controls should be used, or even the vocabulary for the on-screen text. In case you're wondering, I do UI's for our products. The reason I do them is no one else had the stones wanted to do the job. :sigh:
Software Zen:
delete this;
Gary R. Wheeler wrote:
That's why there are so many apps out there that are utter crap.
This number of crap apps is squared for web apps where the fluidity and interaction of components based on things as complex as the CSS and HTML specs make UI behaviour so much less deterministic.
-
Hamed Mosavi wrote:
Anyway, such a thing will save hours of work for many programmers in the world, I believe.
No, not really. You could "sketch" a form, but then once it guesses at the controls you want, you would then have to go back and fix all the mistakes it made, naming the controls properly, double-checking partent-child relationships, nesting, blah, blah, blah, ..., pretty much wasting those very hours to tried to save. I can "sketch" a form, dragging and dropping controls faster than I can draw one. At least with dragging and dropping, I can make changes very easily without having to reach for the eraser or another sheet of papper and starting over.
A guide to posting questions on CodeProject[^]
Dave KreskowiakDave Kreskowiak wrote:
I can "sketch" a form, dragging and dropping controls faster than I can draw one. At least with dragging and dropping, I can make changes very easily without having to reach for the eraser or another sheet of papper and starting over.
Yes, I don't understand why so many people just don't see this, but the huge advantage of sketching is where the desired UI requires extensive customization or configuration of components. That is, the user will want something that cannot be achieved by just dragging and dropping out-the-box controls. This especially applies to web interfaces where it often takes large amounts of technical design and calculation to achieve the desired UI.
-
Yeah, right. Everyone thinks doing UI is easy, so you might as well have the lowest dork on the totem pole do it. "Give it to the intern, it's not worth anyone else's time." That's why there are so many apps out there that are utter crap. Companies are so enamored of their underlying algorithm or process, they give the UI short shrift. No thought is given to how things should be presented, what controls should be used, or even the vocabulary for the on-screen text. In case you're wondering, I do UI's for our products. The reason I do them is no one else had the stones wanted to do the job. :sigh:
Software Zen:
delete this;
Gary R. Wheeler wrote:
In case you're wondering, I do UI's for our products
For which you have my sincere sympathies, I just wasted 2 weeks trying to get the UI looking precisely like the MDs requirements, what we got was absolute crap, to the point where I am refusing to deploy it! You want a good UI then employ a professional, not a developer, not an intern, get someone trained and skilled in UI design! PS I'm a great believer in battleshit grey!
Never underestimate the power of human stupidity RAH
-
Gary R. Wheeler wrote:
That's why there are so many apps out there that are utter crap.
This number of crap apps is squared for web apps where the fluidity and interaction of components based on things as complex as the CSS and HTML specs make UI behaviour so much less deterministic.
Agreed. I've done a couple intranet web apps for internal support uses, and it's a PITA to get something that looks reasonable on more than a token group of clients. For small scale deployments, you simply don't have the time or resources to test more than three or four browser/version combinations.
Software Zen:
delete this;
-
Gary R. Wheeler wrote:
In case you're wondering, I do UI's for our products
For which you have my sincere sympathies, I just wasted 2 weeks trying to get the UI looking precisely like the MDs requirements, what we got was absolute crap, to the point where I am refusing to deploy it! You want a good UI then employ a professional, not a developer, not an intern, get someone trained and skilled in UI design! PS I'm a great believer in battleshit grey!
Never underestimate the power of human stupidity RAH
I've actually learned to like doing the UI stuff. It just pisses me off that people are so dismissive about it.
Software Zen:
delete this;
-
I've actually learned to like doing the UI stuff. It just pisses me off that people are so dismissive about it.
Software Zen:
delete this;
Have them spend 2 weeks fucking about with colours,shades and little graphicky things and they will lose the cavalier attitude. I am starting to push for a dedicated designer to be added to the teams asking a developer to do this crap is counterproductive!
Never underestimate the power of human stupidity RAH
-
Sketchflow[^] will do what you want, though you need to draw into the machine directly (32 mins into the vid).
“Education is not the piling on of learning, information, data, facts, skills, or abilities - that's training or instruction - but is rather making visible what is hidden as a seed”
“One of the greatest problems of our time is that many are schooled but few are educated”Sir Thomas More (1478 – 1535)
This is cool, but I have something different in mind. (SketchFlow reminds me of Macromedia Flash times, by the way.) I was thinking more about a markup generator from a drawing, not extracting images to show in the flow, but real controls.
-
Hamed Mosavi wrote:
Anyway, such a thing will save hours of work for many programmers in the world, I believe.
No, not really. You could "sketch" a form, but then once it guesses at the controls you want, you would then have to go back and fix all the mistakes it made, naming the controls properly, double-checking partent-child relationships, nesting, blah, blah, blah, ..., pretty much wasting those very hours to tried to save. I can "sketch" a form, dragging and dropping controls faster than I can draw one. At least with dragging and dropping, I can make changes very easily without having to reach for the eraser or another sheet of papper and starting over.
A guide to posting questions on CodeProject[^]
Dave KreskowiakDave Kreskowiak wrote:
it guesses
Honestly I haven't been working with NN and image processing after college, if it's still that immature, then it's kinda sad!
Dave Kreskowiak wrote:
I can "sketch" a form, dragging and dropping controls faster than I can draw one.
Maybe! Most of the time is wasted on layout, naming, resources and stuff like that for me. I think many of such tasks can be automated.
-
Have them spend 2 weeks fucking about with colours,shades and little graphicky things and they will lose the cavalier attitude. I am starting to push for a dedicated designer to be added to the teams asking a developer to do this crap is counterproductive!
Never underestimate the power of human stupidity RAH
Mycroft Holmes wrote:
Have them spend 2 weeks f***ing about with colours,shades and little graphicky things and they will lose the cavalier attitude.
Rather, have them spend two days before they even begin, making sure that colours,shades and little graphicky things are decided, and the decisions are down on paper, so that they can build templates and style sheets (real style sheets, not the ones beginning with "C"). That way, everything is in approved colours and shades right from the word go, so there's no room for argument, and the little graphicky things can all be set at fixed sizes, so that if someone wants one changed, they can provide the new graphic (which must only use approved colours and shades) of the right size, so that it can just be inserted to replace the former one. The main thing to get across is "We are doing this professionally, and are working to professional standards, so if you want something changed, you'd better have damned good, and fully documented, reasons for it". Too often, developers allow themselves to be walked all over, when they move into UI design, because they think (sometimes rightly, sometimes not) that they're not qualified and/or or skilled enough to do it, but the point is not that you have to be highly qualified or skilled; you just have to be professional, and refuse to allow unprofessional behaviour in others. That a prototype UI design is not perfect means that it is a work in progress; it does not mean that everyone can just jump in and behave like little kids in a sandpit. A very useful thing to include at the end of a UI demo is a change-request form. Do not accept changes without a change-request form -- force everyone to keep it professional.
I wanna be a eunuchs developer! Pass me a bread knife!
-
Mycroft Holmes wrote:
Have them spend 2 weeks f***ing about with colours,shades and little graphicky things and they will lose the cavalier attitude.
Rather, have them spend two days before they even begin, making sure that colours,shades and little graphicky things are decided, and the decisions are down on paper, so that they can build templates and style sheets (real style sheets, not the ones beginning with "C"). That way, everything is in approved colours and shades right from the word go, so there's no room for argument, and the little graphicky things can all be set at fixed sizes, so that if someone wants one changed, they can provide the new graphic (which must only use approved colours and shades) of the right size, so that it can just be inserted to replace the former one. The main thing to get across is "We are doing this professionally, and are working to professional standards, so if you want something changed, you'd better have damned good, and fully documented, reasons for it". Too often, developers allow themselves to be walked all over, when they move into UI design, because they think (sometimes rightly, sometimes not) that they're not qualified and/or or skilled enough to do it, but the point is not that you have to be highly qualified or skilled; you just have to be professional, and refuse to allow unprofessional behaviour in others. That a prototype UI design is not perfect means that it is a work in progress; it does not mean that everyone can just jump in and behave like little kids in a sandpit. A very useful thing to include at the end of a UI demo is a change-request form. Do not accept changes without a change-request form -- force everyone to keep it professional.
I wanna be a eunuchs developer! Pass me a bread knife!
Thanks Mark, I needed a good laugh on Monday morning, nail down UI specs indeed, we can't even nail down the application requirements let alone the UI. I would love the luxury to actually force the business to supply clear requirements but they don't know what they want and certainly don't know what they can get from a system. We work on an iterative process, here is the first draft of what we think you want, they then get to define the next set of requirements based on that. It's almost like agile without the formal agile crap that goes with it! I did get a laugh when the MD pointed us to another group who are spending $m on their new design and asked why we, a bunch of data oriented developers, could not even deliver what he wanted.
Never underestimate the power of human stupidity RAH
-
This is cool, but I have something different in mind. (SketchFlow reminds me of Macromedia Flash times, by the way.) I was thinking more about a markup generator from a drawing, not extracting images to show in the flow, but real controls.
IIIRC Sketchflow generates XAML screen prototypes :~
“Education is not the piling on of learning, information, data, facts, skills, or abilities - that's training or instruction - but is rather making visible what is hidden as a seed”
“One of the greatest problems of our time is that many are schooled but few are educated”Sir Thomas More (1478 – 1535)
-
I was wondering today, while drawing sketch of a form, if there is any tool that can use image processing to convert a drawing to generated code for a
XAML
orHTML
form. Drawing a sketch is very fast and much easier than dragging controls on a form and I guess it wouldn't be impossible to build something like an NN to process parts of a photo of an sketch to extract controls and generate a form based on them, although extracting handwritten text might not be that easy. Anyway, such a thing will save hours of work for many programmers in the world, I believe. Any prior attempt or any idea? -
I was wondering today, while drawing sketch of a form, if there is any tool that can use image processing to convert a drawing to generated code for a
XAML
orHTML
form. Drawing a sketch is very fast and much easier than dragging controls on a form and I guess it wouldn't be impossible to build something like an NN to process parts of a photo of an sketch to extract controls and generate a form based on them, although extracting handwritten text might not be that easy. Anyway, such a thing will save hours of work for many programmers in the world, I believe. Any prior attempt or any idea?If your sketch is accurate enough that it's actually a design, that's impressive in itself. But how would it know whether this control is supposed to be positioned at (305,267px), or 'half way down the page', or 'just below that thing'? What about the names, data bindings, default text, captions, keyboard shortcuts and behaviour of the controls? How would it know which control type that wonky rectangle on the page represents? How the grouping of controls that are drawn near each other should work?