Notes on the Magic Designer Program

Things the program can do that the toy cannot do:

The physical crank sometimes interferes with some drawings. This does not happen on the computer.

The clipping can be turned off, thus drawing off the paper.

A design can be discontinuous, meaning that parts of it are impossible to draw. This can be done with the toy, but it is very difficult and can damage it.

Various changes in configurations. This is discussed elsewhere. The physical toy is one case of a family of complex curved shape generators.

To save what is on the drawing window, one must use a screen capture technique or program. There is no point for this program to have this capability, since each program is best at what it was designed to do. Here is a recommended screen capture program: MWSnap

One additional thing to do, which is very popular, is to capture the designs as a picture and then paste it into a paint program, and color it in. Windows comes with Paint, but I would also recommend this program:

Update May 15, 2007: A function has been added to a new button to copy the drawing window to the clipboard so it can be pasted into any graphics viewer or paint program. This makes it unnecessary to use a screen capture program.

Differences between the Windows (Download) version and the Browser Version:

Update for April 11, 2007:

The ability to save a design was implemented using a PHP program and the mySQL database provided by the cp-free server. The rows correspond exactly to what is stored by the Windows program. One thing I found out, was that PHP will return NOTHING if there is a syntax error. Also, PHP will make a new page in the browser, so to get back to the drawing requires the back button. As a side effect of this, I place on that page the text needed for the Windows program. So, for people who have the Windows program, and make designs with the Browser version, they can save their designs for loading into the Windows program. In Firefox, if you save that page as a text file, and name it 'something.mgs', and then load that file into the Windows version, you will see the exact same designs. Actually, there is a subtle difference, which deals with the tiny DIVs, and I am not sure why that is. Why the C and javascript versions would round differently.

There is a general issue (resolved) with the storing of colors. In Windows, the (R,G,B) is stored with R in the low byte. On the Web, colors are given this text string format: #RRGGBB. Those are 6 hex digits.

Finally, as of today, the Opera browser does not store the designs (but does store the background color) to the database. The values in the data is not getting to the PHP for that part, and I am not sure why.

Internet Explorer has a different problem, which was there all along. Shapes made with Walter Zorn's library, which is what is used in the Browser program, go away if you use the back and forward button in the browser. I did a Start button to clean things up, because the browser refresh was not a clean start for Internet Explorer. However, it is disturbing for these nice shapes to vanish when they get saved. It seems as if Internet Explorer is not consistent. It tries hard to maintain values entered into forms, and yet loses the colors too easily. Also, the way that things are laid out in Internet Explorer is ugly, so that my Advanced parameters which are hidden, still makes the browser think that it needs to scroll, when it should not. I wonder why Internet Explorer is the leading browser, with all of these problems.

Update for April 16, 2007:

Using a technique which has been called AJAX, PHP does not need to generate full pages. I found a way to treat the server as a servant, and leave the client in control. I wrote a general purpose AJAX PHP caller, based upon something I found online at this site: AJAX Form POST Request .

I have changed the placement of this exact duplicate session MGS file, which is identical to the Windows Euphoria version. It is a button to toggle a hidden DIV, just like for the Advanced parameters. If the user also has the Windows program, they can select and copy using the mouse the contents of that DIV, and paste it into a text editor like Notepad, and save it as a file.MGS. Then clicking on it should bring up an identical design to what is seen in the browser.

I never resolved the problem with Opera browser with PHP. But using AJAX seems to have eliminated that problem.

The other main problem with Internet Explorer, is that it does a scrolling of the browser, even though the DIVs are hidden from view.

Update for April 21, 2007:

Still to do:

The problems with Internet Explorer are that the text is not handled in the same way. A blank line is placed under the text and this makes some things appear larger than they need to be, like in the Advanced parameters. And, there is a known bug in innerHTML for options in a select list. But the work around is also giving me some problems. There are many ways to do the same thing in javascript, and I think creating elements is the most direct method. It turned out that the innerHTML was not the main issue. Internet Explorer does not use appendChild method, but uses the add method instead. Actually, things are not that simple. With IE, the appendChild method works in some cases and not others. I am making use of Walter Zorn's function chkDHTM having been called to know what to use.

Loading a saved design session makes 3 PHP programs, and I wrote them all with the same idea. No HTML code or code of any form is generated. PHP is only being used to save or return the data from SQL database. I came up with the idea to send rows with a linefeed (ASCII 10) in between each one, and the javascript uses the responseText.split("\n") to get each line into an array. The other thing I do, which is a bit of extra work, is to use the Windows program MGS file format in the PHP program.

It turns out that only the Opera browser shows each design as it is being loaded, while IE and Firefox wait until all of the designs are loaded and it displays them all. Perhaps there should be a message saying to wait.

I found out that the extra blank lines in Internet Explorer are due to the Forms having margins around them. To standardize all the browsers to look the same, CSS is used to set the margins for Forms. I needed Forms because the sliders javascript I am using requires it. Forms makes the addressing of elements easier, but one can use id in any element to find it globally.

One issue remains. The subtle difference which I mentioned before on April 11. This is due to the way zoom is used. Both programs do use 531, I think, but when the browser version writes MGS file it makes a 532. I need to standardize the zoom factor, and make sure MGS are written okay, and make sure that existing saved designs loaded back are going to give a legal zoom factor (-12 to 12 with 0 for none).

Update for May 3, 2007:

I have been working on another computer program called Complex Curves Shapes Generator. The development of this program made me realize that I can leverage all that I had done for Magic Designer. So, I made a stripped down application which has everything in Magic Designer other than what appears on the Basic and Advanced tabs. And Complex Curves Shapes Generator has another method of specifying designs. It is not based on any particular physical toy, but is loosely based on Spirograph. It actually comes from a Flash program I found on the web: Isotope 2

Two ideas which I wish to work on with this program are color effects inside a design, and being able to interact with the design as it is being drawn. I had some problems making the color routines both callable externally from Euphoria and from inside of the C code. I got something which works, but I am not sure it is the correct or elegant way to program.

Being able to interact is easier if the whole thing is programmed in Euphoria. So, I also compared C and Euphoria rewritten versions of the drawing logic. I used a drawing logic which I fit into that stripped down application which I call Generic Shapes. I felt that I should stay with C for the drawing, since it is faster. So, I am thinking at both ends. I am thinking for maximum possible speed, and also for slowness so I can change a design as it is being drawn. Perhaps I need to maintain both versions, and use the Euphoria drawing logic for the slow side. That is extra work, and I prefer only having one way, so we will see.

In the course of speed, I finally realized how to fix the number one problem with Magic Designer and any other drawing program. And that is, that to be professional, it needs to repaint itself. This is why I am releasing Magic Designer as a next version as soon as possible.

How does this repaint work? It is another extension of the DIV idea. The early versions of Magic Designer simply plotted a point and a line was drawn from the previous point. And when I wrote the Browser version, and used Walter Zorn's library, I realized that all curves were a mass of tiny DIVs. Each of these DIVs has either length or width, a color, a thickness. So, the program can keep track of these emulated DIVs in the drawing process, like the browser keeps track of them. It simply has an array of C structures having position, width/length, color, thickness, and orientation. It takes 16 bytes per DIV and I am allowing 100,000 DIVs per design. That is the buffer, and when a design is done, it is copied to what length was used. Magic Designer designs typically have less than 1000 segments (identical word to DIV). And when Refresh is pressed or when Windows generates a Paint message to the drawing window, these DIVs are replayed back. This saves the time to recalculate. I found that this is anywhere from 50% to many times more faster.

Update for May 23, 2007:

There have been many enhancements to the Magic Designer Windows version. The Browser version has not changed.

Here is a list of enhancements since May 23, 2007:

-- Added PDF printing
-- Bezier smoothing from: BezierSpline
-- Used Cairo for drawing.
-- Added multiple designs draw capability.
-- Fixed Help localization
-- Changed defaults to solve mirror image bug and design orientation.
-- Added arm adjustment due to width of physical arms.
-- Saving advanced fields to MGS file.
-- Made shift lever edit box editable.
-- Banding ellipse improvements:
-- There is always an ellipse.
-- A radio is used to edit begin or end or center.
-- clicking left button continues with the same ellipse.
-- fine tune with arrow keys, cross hairs
-- Use pixmap to do immediate repaints for normal painting of drawing area.
-- Prev Curr Next use press and hold.
-- Remove Refresh and dirty since all designs are kept neat at all times.
-- Made two windows. Esc to toggle maximize.
-- Changed the way Basic/Advanced/circle studs work.
-- Apply number to Undo, Redo, Prev, Next as well as Draw.
-- Added buttons size (to show if designs are off page), slow (preview draw), ellipse (to hide ellipse). 
-- Grouped drawing appearances Nice, Dots, Jagged for screen and PDF.
-- Changed the way zoom works to be more accurate with sliders and arrow keys.

The following discusses various challenges faced and overcome in the Browser and Download versions from April to July 2009.