Android Application: Graphics Scene



Looking for Graphic Plot?Graphic Plot

A Two-Dimensional Graphics App With Freely Moveable Graphics Scene Items You Create

Graphics scenes saved directly from the app as png files (equivalent to screen shots) and reduced 25% or 50% per dimension.





Looking for Graphic Plot?Graphic Plot

Graphics Scene allows you to create two-dimensional scenes filled with geometric figures such as polygons, lines, and arrows as well as text and images. The created items are freely moveable within the scene which occupies the available screen space. Items can be rotated and assigned colors and sizes. An imaginary z axis extends above the plane of the screen and determines which items are drawn on top of other items in the scene.The scene may be saved to and opened from file storage. Typical applications include making collages of images, text, and geometric items arranged in a visually attractive manner. In addition, reorganization charts, flow diagrams, chemical structures, and other graphics could be produced with careful planning. The idea is to enable the drawing of sharp, organized scenes for those of us who are poor at free hand drawing. These scenes can be saved as a .png file for sending to a printer or to another device for display or as an email attachment. Creating scenes can be assisted by use of image processing programs and color charts as well as a word processor for formatted multiline text.

Acknowledgments:
Some dialog Code adapted from:
http://code.google.com/p/afiledialog/
https://github.com/iPaulPro/aFileChooser
http://scarlet711.blogspot.com/2011/06/android.html ( Hiroyuki Itoh ) Color Picker Sample Google Play
https://code.google.com/p/dialogfragmentdemo/
html color choices adapted from:
http://www.imagemagick.org/script/color.php
Tutorials:
http://www.mybringback.com/series/android-basics/
http://www.newthinktank.com/author/admin/
and many other sites
IDE: https://netbeans.org/ 7.3

FAQ:

1. How do you make a two-color polygon? After creating the polygon, choose Menu Bicolor Item and put in the new pencolor and/or brush color. The pen color represents the color of the stroke that outlines the figure or draws the text. The brush color represents the fill color of closed polygons like a hexagon. The filled polygon can be one color or can be bi-colored with different pen and brush colors for a pleasant and attractive effect.

2. Why did I get a stroked polygon instead of a filled one? When creating the polygon remember to check the fill box in the dialog. Change to fill by going to Menu Mod Sel Item and choose Fill.

3. How do I set the text size when creating a text item? The penwidth and the textsize should be the same number (penwidth loses its meaning with text) and for high resolution tablets the size should be larger than normal because the pixel density is so high. Adjust for your device.

4. Where can I find my images for the image item? Place your images where you wish but I recommend a single folder under Downloads for your project. The app provides a dialog to help find the images on your system. You may also use a file manager to find the path to your images. Remember that for portability, the images would need to go with the app unless you save the whole scene as an image file like myimage.png. For the general polygon the points file needs to go too.

5. What if I want formatted text and multiline text in my scene? Produce your text material in a word processor and make an image of the formatted text and create an image item in the scene using that image.

6. I want a background gradient for my scene. Do you support making gradients? No, this is not an image processing app. Make your gradient with image software either on Android or use ImageMagick on Linux. Make sure the image is large enough to cover the entire background (e.g. 1200x1920).

7. Why not a color dialog in the creation stage and a color wheel for choices? You have a color viewer to look at individual colors and a few color bars compliments of another developer. You now also have a color dialog in the form of a web page; click the hyperlinks and values are added to the input area. The color dialog web page also is available in the pen and brush color dialogs. There are several hundred color swatches to view and make selections from them. You can also just enter the r,g,b values if you know them. The setup of your graphics scene should involve some thought about the location of items and colors that you want to use. The rgb approach (red, green, blue) insures that you can reproduce each of those colors exactly. I recommend downloading the named colors from ImageMagick as a large assortment of colors to choose from for your creation. http://www.imagemagick.org/script/color.php There are 16777216 colors possible but not all of them easily discerned from each other. I would keep this list or another one handy on another computer or in the browser so that it can be used as a help in your project.

8. How do you save the graphics scene canvas as an image. Select Menu Save As PNG and a new view will appear; then select the menu item to save the image.

9. I want to change my item; how do I do that? Touch the item and choose Menu Modify Sel Item and change the properties.

10. How do I save and open my work? Choose Menu Graphics Scene Save/Open. Clear the canvas before opening a file or the new items will be added to the present work. This is the default so you can add saved pieces of work easily as you build your scene.

11. What if I want to copy an item in the scene and move it elsewhere with or without some changes? Choose Menu Copy and then Paste and the item will appear as an exact duplicate of the previously selected item. To modify the new item, touch it and choose Menu Modify Sel Item. This is handy if you are assembling a larger structure that contains two or more similar items. Suppose you want a diamond with two different colored halves. Rotating a square will not give you two internal colors on either side of the middle. Rather construct a triangle with one brush color. Copy it and paste the second one. Rotate it 180 deg and change the brush color (pen color stays the same). Now move it to align with the first triangle and you have a two color diamond with a common pen color separating the halves. If you do not want the pen color to show then make each triangle pen color the same as its corresponding brush color.

12. How do I make a right triangle; the application only makes equilateral triangles? Use the Polygon item approach and define your text file to contain: 100,100 100,200 200,200 100,100 each pair followed by a linefeed(return). Save the file in your text editor and then place the path to the file in the file path property. You now have a closed polygon that can be filled if desired. Rotate for orientation and adjust values for size. Use a similar approach for isosceles triangles. For example, 200,200 400, 200 300,100 200,200

13. I used the general polygon to make something like a floor plan but now I do not want it to move around anymore. Help? Choose Menu Modify Sel Item and give it a zval of -1; it will not move anymore. If you want it to move later on, just repeat these steps and assign a new zval > -1. This only works for the general polygon as a convenience. To fix relative positions of a subunit of your scene save the subunit to an image and add it back as an image item after deleting the individual items.

14. Why cannot I use my finger to draw lines in this app? The app is not a painting app. It is meant to produce exact geometric objects with straight lines or circles and arrows that would be hard to draw free hand.

15. I want to make a dodecahedron but you only go up to octagon. Help? Currently, there are no plans to go further in polygons. Figures of 9, 10, 12, 16, 20, and 24 sides are feasible but are likely not needed. They would add to the complexity without a clear need. However, you can make one using the general polygon by the input of x,y values. To help with that, I have included some values for a fixed size example. If you want a scalable version you will have to develop the points as functions of sin and cos of angles and the side length. Alternatively, you can make the polygon an image and use image processing to adjust the size. Polygons.

16. You did not include an arc item. Why? The arc drawing in Android is a little bit awkward in my view so I offer an alternative. Make a circle of the desired size and color, filled or not depending on your need. Make a black filled rectangle large enough to place over the circle and produce a chord where desired. Now change the pen and brush color of the rectangle to the background color.

17. I want an item in my scene to have some transparency. Help? Touch the item and choose Menu Modify Sel Item and change the transparency from 255 (opaque) to some lower integer value until you achieve the desired transparency.

18. I have some text in my scene but I want it on top of another item. Help? Touch the text and choose Menu Modify Sel Item and change the zval to a higher value than what is currently covering it.

19. I made a mistake and cleared my canvas without saving my work first and now I want it back. Where is the undo? There is no undo or redo in the app. You are strongly urged to save your work as you go and frequently as well. But all is not lost. The app automatically saves a file in the Download directory when you erase the graphics scene. The file(s) begin with "clear" followed by a number and then the extension .gsc. The highest number would be the latest file saved. If you need any of these, rename them because the next time the app is started the file names will be reused. The temp.gsv file saves your work when an orientation change occurs and reloads it from the file as the application is automatically restarted by Android. Sometimes it may be necessary to delete this file to provide a blank page to load and to preclude long load times. If you deleted the wrong item or have second thoughts about deleting an item, I have you covered as well. Select Menu Add Last Deleted and it should be restored. Keep doing this if the item is several deletes back.

20. Why does your app use the public directory and also why do you use a text type file to save the graphics scene? I like the user to be able to access and control where the files are stored and possibly back them up to another computer or storage location. A scene could involve a lot of work and the user should have the say in my view. In C and C++ my application would use a binary format but in this instance I went with a text file approach which also gives the user the opportunity to view these files in a text editor. This also makes the files portable to another computer and operating system. The text file editing approach also would allow you to change the location of the image files within the saved file to correspond to their location in the new environment. Remember to move images along with the saved graphics scene. For the general polygon the points file needs to go too.

I have a C++ app that is roughly similar (estimate 80-90% of items compatible but some fine tuning might be needed) but uses the traditional mouse on Linux. Contact me if you need to move the work to a Linux desktop and I will see what I can do because I have to write something to import the data to the other system and provide an install script for the C++ program. I currently use openSUSE 11.4 to 12.3 or later. If you use a different Linux desktop, some additional adjustments might be needed. I would ask for $1 for this and that could be done by downloading a different android application of mine (GraphicsPlot) which I will add to Google play, even if you did not need it. It just takes care of the business end for me, and frankly is a nominal amount for the work involved in the C++ app. I will provide a download site for the .tar.gz file. In addition, I will provide two more programs that might be of use: an image processing program that is mainly a GUI for ImageMagick and a spreadsheet program that does a lot of other things and includes plotting and database capabilities. Finally, as a separate, unrelated offering I have a filemanager application that does a lot of extra things and works a little differently than the usual applications included with the desktop. Ask about the latter if interested.

21. I want to make a graphics scene bigger than the available canvas but you do not provide a facility to do this. Help? Currently, the app uses the available visual area of the device for the graphics scene. At current resolutions, the scene may already be larger than what can be printed to a printer unless reduction is used (e.g., using the .png file produced). In addition, the scene is matched to what is visible with your device so that is what you can enjoy seeing. A larger project is more suited to the desktop environment with scrolling on a physically larger screen and much greater computing resources than available with a tablet. See question 20 for information on transferring the graphics scene to a desktop environment.

22. The application is slow to load or may not load properly at times. Help? The saved work file temp.gsv is loaded at start up and if it has many items can cause the system to bog down. Presumably, your work is already saved in a different file. Clear the temp.gsv file on the start page (click the button) so that a clear background will be loaded (or delete it with a file manager). After the app loads, then load your saved work. If you are in the predicament that temp.gsv is the only file with your work, first copy it to another directory and then rename it something.gsc before deleting temp.gsv. Also, if you clear the scene, pause, and resume you should also clear the backup file.

23. I get an improper format message when I change colors. Help? Colors on some dialogs are entered as the triplet colors rgb as 255,55,0 without spaces and with the commas as indicated. The prompt may appear like: 255,55,0 (135,135,135). The first set of numbers are the current color of the selected item. The second set in parentheses represent a saved color (pen or brush) selected in the view colors dialog. Only the desired rgb color of the proper form can be accepted, i.e., 135,67,199 format as stated.

24. I got an application closed message while doing something. What gives? Ideally, this should never happen but the ideal is not always achieved though we would like it to be. While considerable error catching is included and may lead to a result that was not the intended result (e.g., an incorrect color is changed by the program to a proper color but not the one you were wanting), losing the entire app could be damaging to your project, especially if the work was not frequently saved. Please send me the particulars so that I can try to reproduce the problem in order to find out what happened and determine how to fix it. I deeply regret the inconvenience and again remind all to save your work frequently and to keep back up copies available. Your project is important to you and that makes it important to me. So, please protect it by saving it before you start something else. You are strongly urged not to modify your data files directly through a text editor. To do so could easily result in a corrupted file that can no longer be read by the app. However, because the files are text, it should be feasible to fix the mistake enough to make it possible to use it again with the restoration of the proper format. The format is obvious and the same for each item but even the addition of an extra space could invalidate an item or a property of an item. Make changes to your project through the app and save the new version. The one exception is mentioned in 20.

25. The general polygon and the text do not act the same on rotation and on selection as the other items. Why? Generally, the item is enclosed in a bounding rectangle so it can be selected. The center is usually selected as the point of rotation. However, in the case of the general polygon and text, the point of rotation is at the first point of the item. This is also where the bounding rectangle is placed. The bounding rectangles are not necessarily what the name implies as there is no requirement to calculate collisions of items so that in fact they may not enclose the item. This is by design. Therefore, they merely present a convenience area to allow touch selection. The general polygon could be a meandering figure taking up much of the available screen. Thus, the selection is confined to an area around the first point. The start point of text is the most important for rotation and position and the bounding rectangle is centered here.

26. I tried to rotate my item and it went out of view. Now I cannot see it or select it. Help? There are two solutions. Since it was the last selected item, try to move it to the center using Menu Modify Sel Item Change X,Y Values. A second approach is Menu Center All Items and they all should be clustered near the center.

27. Why is the default background a light gray (235,235,235) instead of white? You can change it easily and make it white. The reason for off white is that it makes the color white a useful color on its own since it contrasts with the background. Also, it avoids the trap of thinking something is transparent when it really is not when it blends in with the backgound. Also, if you import the saved png file of the scene into an image handling program, it is easy to see the extent of the image if the container is larger than the image dimensions and the background of the container is white.

28. My images are large and I need to resize them. Help? The app is not an image processing app. However, to give you thumbnail capability there is a menu selection to first size the thumbnail default value such as 100 or 200; then select Resize/Save and a thumbnail will be saved as a png file and an r is put in front of the filename. Note that the algorithm used from Google suggestions only scales by factors of 2 so the thumbnail will be a reduction of 2, 4, 8, etc. The good news is it maintains the original aspect ratio. For finer control use a specialized app.

Last updated: 10 January 2014