<font face="arial" size="2"><p style="margin:0;padding:0;font-family: arial; font-size: 10pt; overflow-wrap: break-word;">Hi Joe,</p>
<p style="margin:0;padding:0;font-family: arial; font-size: 10pt; overflow-wrap: break-word;"> </p>
<p style="margin:0;padding:0;font-family: arial; font-size: 10pt; overflow-wrap: break-word;">Outstanding research!</p>
<p style="margin:0;padding:0;font-family: arial; font-size: 10pt; overflow-wrap: break-word;"> </p>
<p style="margin:0;padding:0;font-family: arial; font-size: 10pt; overflow-wrap: break-word;">I've been flailing around a similar problem with dim lights of success here and there.</p>
<p style="margin:0;padding:0;font-family: arial; font-size: 10pt; overflow-wrap: break-word;"> </p>
<p style="margin:0;padding:0;font-family: arial; font-size: 10pt; overflow-wrap: break-word;">We all know that there are issues with your long-in-the-tooth erlguten library.</p>
<p style="margin:0;padding:0;font-family: arial; font-size: 10pt; overflow-wrap: break-word;"> </p>
<p style="margin:0;padding:0;font-family: arial; font-size: 10pt; overflow-wrap: break-word;">I've pulled out the font management and copy-fitting routines, made slight modifications, and have been building up a page-layout program. At the moment I'm focusing on PDF, but many underlying concepts apply to HTML and desktop GUIs as well.</p>
<p style="margin:0;padding:0;font-family: arial; font-size: 10pt; overflow-wrap: break-word;"> </p>
<p style="margin:0;padding:0;font-family: arial; font-size: 10pt; overflow-wrap: break-word;">So first thing I'd note, is that you may be dealing with an even more general problem than you think-- e.g. how to display content in a 2D space for most effective communication of intent between content creator and consumer. In the case of GUIs, the roles of content creator and consumer shift back and forth like a ping pong game.</p>
<p style="margin:0;padding:0;font-family: arial; font-size: 10pt; overflow-wrap: break-word;"> </p>
<p style="margin:0;padding:0;font-family: arial; font-size: 10pt; overflow-wrap: break-word;">Print graphic designers have long experience and established techniques for approaching the problem.</p>
<p style="margin:0;padding:0;font-family: arial; font-size: 10pt; overflow-wrap: break-word;"> </p>
<p style="margin:0;padding:0;font-family: arial; font-size: 10pt; overflow-wrap: break-word;">They first divide the 2D space into a page grid--- essentially a composition of boxes. You'll find many approaches and theories of how best to design page grids on the web.</p>
<p style="margin:0;padding:0;font-family: arial; font-size: 10pt; overflow-wrap: break-word;"> </p>
<p style="margin:0;padding:0;font-family: arial; font-size: 10pt; overflow-wrap: break-word;">Turns our that boxes can be comprehensively represented as maps in Erlang. Taken a step further, no reason why a box can't be moved, re dimensioned, scaled, etc., in an Erlang process.</p>
<p style="margin:0;padding:0;font-family: arial; font-size: 10pt; overflow-wrap: break-word;"> </p>
<p style="margin:0;padding:0;font-family: arial; font-size: 10pt; overflow-wrap: break-word;">Box parameters include xy position of upper-left corner in the 2D space, width, height, and various other application-specific parameters--- borders, background color/image, content, etc.</p>
<p style="margin:0;padding:0;font-family: arial; font-size: 10pt; overflow-wrap: break-word;"> </p>
<p style="margin:0;padding:0;font-family: arial; font-size: 10pt; overflow-wrap: break-word;">With this thought in mind, I've been working on a box language to efficiently define a page grid in Erlang. What I have works, but no doubt can be improved and optimized.</p>
<p style="margin:0;padding:0;font-family: arial; font-size: 10pt; overflow-wrap: break-word;"> </p>
<p style="margin:0;padding:0;font-family: arial; font-size: 10pt; overflow-wrap: break-word;">Next thought is what goes into each box in the page grid--- text, images, graphics, Erlang functions... Hey, "widgets" if you will.</p>
<p style="margin:0;padding:0;font-family: arial; font-size: 10pt; overflow-wrap: break-word;"> </p>
<p style="margin:0;padding:0;font-family: arial; font-size: 10pt; overflow-wrap: break-word;">Most all of this can be abstractly defined without regard to media--- print or video.</p>
<p style="margin:0;padding:0;font-family: arial; font-size: 10pt; overflow-wrap: break-word;"> </p>
<p style="margin:0;padding:0;font-family: arial; font-size: 10pt; overflow-wrap: break-word;">Box mind-set can be focused down on widgets.</p>
<p style="margin:0;padding:0;font-family: arial; font-size: 10pt; overflow-wrap: break-word;"> </p>
<p style="margin:0;padding:0;font-family: arial; font-size: 10pt; overflow-wrap: break-word;">A widget is a composition of visual elements in a contained space. Visual elements include text, icons, boxes, etc. Text and icons can be abstractly represented as boxes. Boxes all the way down.</p>
<p style="margin:0;padding:0;font-family: arial; font-size: 10pt; overflow-wrap: break-word;"> </p>
<p style="margin:0;padding:0;font-family: arial; font-size: 10pt; overflow-wrap: break-word;">So, my fantasy---</p>
<p style="margin:0;padding:0;font-family: arial; font-size: 10pt; overflow-wrap: break-word;"> </p>
<p style="margin:0;padding:0;font-family: arial; font-size: 10pt; overflow-wrap: break-word;">1. Perfect the box language--- may be two versions: a) text description; b) point, click, and drag</p>
<p style="margin:0;padding:0;font-family: arial; font-size: 10pt; overflow-wrap: break-word;">2. Perfect an abstract language to define content elements</p>
<p style="margin:0;padding:0;font-family: arial; font-size: 10pt; overflow-wrap: break-word;">3. Define the base visual/functional elements of the content language</p>
<p style="margin:0;padding:0;font-family: arial; font-size: 10pt; overflow-wrap: break-word;">4. Develop libraries of base elements for both print and video display</p>
<p style="margin:0;padding:0;font-family: arial; font-size: 10pt; overflow-wrap: break-word;"> </p>
<p style="margin:0;padding:0;font-family: arial; font-size: 10pt; overflow-wrap: break-word;">If we're smart and shrewd, we end up with an efficient way to generate both print and video display pages in a common language that effectively communicates intent.</p>
<p style="margin:0;padding:0;font-family: arial; font-size: 10pt; overflow-wrap: break-word;"> </p>
<p style="margin:0;padding:0;font-family: arial; font-size: 10pt; overflow-wrap: break-word;">I know that this is all warmed-over-soup. Just watch a handful of TV commercials to see how effectively graphic designers convey intent in 2D spaces or consider the communication issues in 3D CAD programs and how they've been resolved.</p>
<p style="margin:0;padding:0;font-family: arial; font-size: 10pt; overflow-wrap: break-word;"> </p>
<p style="margin:0;padding:0;font-family: arial; font-size: 10pt; overflow-wrap: break-word;">But I want to do it in Erlang and am currently working in my clumsy way to do so.</p>
<p style="margin:0;padding:0;font-family: arial; font-size: 10pt; overflow-wrap: break-word;"> </p>
<p style="margin:0;padding:0;font-family: arial; font-size: 10pt; overflow-wrap: break-word;">All the best,</p>
<p style="margin:0;padding:0;font-family: arial; font-size: 10pt; overflow-wrap: break-word;"> </p>
<p style="margin:0;padding:0;font-family: arial; font-size: 10pt; overflow-wrap: break-word;">Lloyd</p>
<p style="margin:0;padding:0;font-family: arial; font-size: 10pt; overflow-wrap: break-word;"> </p>
<p style="margin:0;padding:0;font-family: arial; font-size: 10pt; overflow-wrap: break-word;"> </p>
<p style="margin:0;padding:0;font-family: arial; font-size: 10pt; overflow-wrap: break-word;">-----Original Message-----<br />From: "Joe Armstrong" <erlang@gmail.com><br />Sent: Wednesday, July 26, 2017 1:45pm<br />To: "Erlang" <erlang-questions@erlang.org><br />Subject: [erlang-questions] My quest for a decent way to make a GUI in erlang<br /><br /></p>
<div id="SafeStyles1501092541">
<p style="margin:0;padding:0;font-family: arial; font-size: 10pt; overflow-wrap: break-word;">More on my search for a good (understandable) GUI engine...<br /><br />I've spent the last few weeks botanising through various<br />GUI/graphics construction kits - and goodness what a mess.<br /><br />I thought I'd share some of my experiences and see if<br />it resonates with anybody.<br /><br />1) Gui building is an (almost) total mess - I say almost because<br /> there is some good software around - but the good stuff tends to be<br /> experimental, undocumented and difficult to use.<br /><br />2) The most popular frameworks are bloated, difficult to use and<br /> impossible to understand without significant effort.<br /><br />3) wxWidgets and the Erlang port wxErlang is usable - but the<br /> documentation assumes you are familiar with the wxWidgets way<br /> of doing things and with OO callback programming - which is<br /> *very* Un-Erlang way of thinking<br /><br />4) The use of interface builders (Xcode, etc.) is a symptom of<br /> problem. GUI codes gets so messy that it is virtually impossible<br /> to write "by hand" - so enter the GUI builder - this is basically<br /> giving up on the idea that GUIs can be written in a clear and<br /> simple manner by hand.<br /><br />5) In the late 1970 - mid 80's there were several GUI languages<br /> and systems that were easy to use and easy to program. For<br /> example Smalltalk, TCL, Visual basic, Borland Turbo Graphics<br /><br />Is there any good stuff around today?<br /><br />Surprisingly the answer is yes - but the code is difficult to find<br />not supported and not mainstream.<br /><br />First a couple of papers that you might find interesting:<br /><br /> + http://www.eugenkiss.com/projects/thesis.pdf<br /> and https://github.com/eugenkiss/7guis/wiki<br /><br /> The author solves 7 different problems with a number of different<br /> GUI's<br /><br /> + http://blog.johnnovak.net/2016/05/29/cross-platform-gui-trainwreck-2016-edition/<br /><br /> A great read - This blog has a lot of good information about the techniques<br /> used to build several state of the art GUIs (for example Reaper,<br />Blender, Light table)<br /> so If you've every wondered how fancy GUIs work this article gives<br />several clues.<br /><br /> It also has the rather nice example of a GUI written using the<br />Electron Framework<br /> that made an 189 MB executable to bang up a window with a small number of<br /> controls in it.<br /><br /> There's a list of references in one of the comments to this blog that<br /> lead to several interesting *small'ish GUIs'<br /><br />Good stuff<br /><br /> I did find some good software and some potentially very good software.<br /> My top picks are as follows:<br /><br /> http://inscore.sourceforge.net/<br /><br /> This is my favorite from an architectural POV.<br /> It is controlled entirely by sending it messages.<br /> Not a single callback to be seen<br /><br /> https://github.com/andlabs/libui<br /><br /> This looks very promising - it's a cross platform adaption layer<br /> with a C interface - I've only build it on a Mac but<br /> the adaption layer looks pretty easy to use. There's a C interface<br /> that could be adapted to Erlang.<br /><br /> There are very few examples<br />https://github.com/andlabs/ui/wiki/Getting-Started<br /> has a go example - but if you download and build the system the<br /> C examples are easy to follow.<br /><br /> http://www.red-lang.org/<br /><br /> Is amazing - Red is a language inspired by REBOL.<br /><br /> REBOL never achieved much popularity - perhaps Red will.<br /> Once you've see red you'll wonder why you program in anything else<br /> (there are good reasons - but for simply desktop apps Red is great).<br /><br /> https://github.com/wjakob/nanogui<br /><br /> Restores my faith in programming - it's small and built on top<br /> of https://github.com/memononen/NanoVG<br /><br /> NanoVG is basically a canvas type interface to OpenGL<br /><br /> Reading the NanoGui code made me wonder if the best way to make<br /> a GUI for erlang would be to use OpenGL for the low-level stuff<br /> and do all the rest in Erlang.<br /><br /> Buttons etc. are pretty easy to define as processes which I believe<br /> is the way http://www.wings3d.com/ did things.<br /><br />The future<br /><br />I'm still undecided - one of more of the following seem attractive<br /><br /> 1) wxErlang - it works *but* it's big and ugly and has a nasty<br /> programming model<br /> 2) An interface to Red would be great - but red is pretty unknown<br /> 3) libui looks promising - anybody interested in this?<br /> 4) the nanogui/NanoVG track looks good - anything with nano in the<br /> name has my vote<br /> 5) The inscore architecture rules - NO CALLBACKS - Yea<br /><br />Verily verily I say unto you - "useth not the callback, even though<br />they that useth the callback are ignited with a great passion and<br />extol the virtues of the callback - for therein lies the madness<br />that do come when the callback faileth for reasons not comprehended'<br /><br />Thus it is writ.<br /><br />Cheers<br /><br />/Joe<br />_______________________________________________<br />erlang-questions mailing list<br />erlang-questions@erlang.org<br />http://erlang.org/mailman/listinfo/erlang-questions</p>
</div></font>