UI components

[Michael Grant]

Hi Andy

 

I have re-familiarized myself with Inkscape which can draw SVGs.  What would you need in terms of UI elements?  What is it that needs to read these graphics files?  If you can tell me what you intend on using, I’ll do a bit of research to figure out how to build something for it.

 

I’ll start with a simple knob element.  In terms of style, I’d keep things simple looking, not fancy or photographic.

 

Michael

 

 

 

[Andy Turner]

Hi Michael

Very Cool!

Hmm, I know nothing of SVG - I'll check it out. Haven't made any
decisions on ABox graphics, will need a little time to get under the
hood.

In a perfect world I'd like to be able to use the mouse wheel to zoom
in and out of ABox. Such a thing would be easier to implement with
vector graphics (isn't SVG a vector format?). Currently ABox uses
sprite style graphics (ie bit blit) that are quite difficult to
maintain.

--A

> --
> You received this message because you are subscribed to the Google Groups
> "Analog Box" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to analog-box+...@googlegroups.com.
> To post to this group, send email to analo...@googlegroups.com.
> Visit this group at https://groups.google.com/group/analog-box.
> For more options, visit https://groups.google.com/d/optout.
>

[Andy Turner]

For reference purposes, I've posted nearly all of the original ABox graphics at:
<https://github.com/andyt7844/ABox2>.
There are just over 200 images in .BMP format, 640x480 pixels, 8 bit
per channel RGB color. I think one can download a zip file of the
whole thing, which will be quite a bit quicker than individual
downloads.

A tool called GBUILD is used to manipulate the images
(resize,outline,palettize) so that they may be incorporated into the
ABox source code. I'm currently rewriting GBUILD and hope to finish by
the end April 2019. When GBUILD is re-completed one will be able to
replace the bitmaps with new ones and adjust the size and shapes.

The results of GBUILD is a single bmp called 'objects.bmp' -- it is a
256 color palettized .BMP that the ABox internals access directly.
'objects.bmp' is found in the 'graphics' sub-directory.

Please don't be alarmed by the color scheme! ABox/GBUILD uses red as
the back-ground reference color (hue=0 deg) and cyan (hue=180 deg) as
the reference foreground color. It is the red-cyan scheme that allows
recoloring of the objects inside ABox - ie: Generator objects end up
being rendered as a different color than Devices.

The downside of the red/cyan scheme is that categories of objects (ie
devices, generators, processors, etc) only get 32 unique colors to
render with. But, 32 colors may fit very well into a vector graphic
scheme (ie Inkscape) as long as we don't get carried away with
gradients.

The re-vamped GBUILD is only a temporary solution. The end goal is to
replace the _entire_ rendering engine with an SVG capable system.
Development is (currently) scheduled a few months out.

In the mean time, new graphics can be created in SVG (say with
Inkscape), rendered to a bitmap (.BMP), massaged with GBUILD, and,
incorporated into ABox. When the new graphics engine is ready (maybe
end of year), the same SVG files _should_ be able to be incorporated
into ABox directly.

Hope this is enough to give an abstract idea of ABox graphics. When
the new GBUILD is ready we can commence to serious face-lifting :-)

--A

[Andy Turner]

... hmm, here we are the end of April and GBUILD is still not ready. Heh, I guess I should apply the old adage 'Double it and add 30" to my scheduling efforts :-)

On the bright side, here are some pictures and verbiage:

GBUILD takes a bunch of bitmaps (640x480 @ 24 bpp) and assigns them to ABox objects. Some objects have multiple bitmaps assigned to them, so we use a 'container' to group them together. Any particular container can be used by multiple objects. Each bitmap in a container can be assigned to a different color palette. The containers also specify how connection triangles point at them, the size and shape of highlights (ie. hover, selected, and error) and the smaller icon for the create panel. GBUILD allows you to adjust/replace all of that.

For an example, consider the Demultiplexer object. It has 14 images assigned to it -- 2 groups of 7 for mode, 1 of 7 to display the current wiper value. Here is one of them

The above image was created elsewhere and rendered to t_left/D_N10.bmp. 

The GBUILD control panel -- with the above image selected -- looks like this:

Above is shown the GBUILD control panel. The three other windows attached to it are shown below. Don't be alarmed by all the mysterious controls -- in many cases we never need to adjust any of them. As shown above, there is a 'container' called 'dplex_container' and the container has the desired t_left\D_N10.bmp inside it (along with 13 others). The 'container' properties are applied to all the bitmaps in the container. However, the 'Bitmap Properties' are different for each bitmap. When selected as shown, a 'container' work window appears. It looks like this:

The above image shows the original bitmap with several markers and outlines applied -- all of which are adjusted with the mouse and/or control panel. There is a center point, an outline built from line segments, a strange looking oval called an 'E track', and a bounding box. The E track defines where the object's pins point. The outline and 'scale fraction' determines how to trim and reduce the full sized image into a smaller image. A zoomed in view of the resultant smaller image is shown in GBUILD's 'preview' window:

Above is an 8X preview image built from the container settings and markers. The three outer 'rings' are the 'error', 'selected' and 'hover' outlines as specified on the control panel. Although numerous small adjustments could be made to make things look nicer, the preview was deemed 'good enough' to use and was incorporated into ABox in 2001.

Next, GBUILD composites all of the bitmaps from the same color group into a single image -- which is shown in the 'composite' window below:

Above is shown the 'composite window' -- it is a 1:1 scale 33 color palettized image of what ABox will actually display. The example bitmap is seen towards the center (6th object in the 3rd row). All images for the same color group (group 3 -- routers) are also displayed along with corresponding 'create menu' icons towards the right.

As a final step, GBUILD packages all the containers, images, and color layers into ABox -- which will apply simple palette manipulations to recolor the color groups as desired by the user.

SO: There's a crash course in how GBUILD will be used. 

It should be able to solve nearly all of the graphics issues that have been brought up. Specifically:

1) X is too small -- adjust the scale fraction to make it larger.

2) X looks funny -- adjusting markers might help, or replace the image, or design your own container.

3) Implementing new object Y -- the graphics for object Y are defined with GBUILD.

4) Will it be able to use SVG ? -- hopefully by the end of the year. Until then render your SVG images to 640x480 and use GBUILD to do the rest.

OK, that's it for now -- Happy Spring to Everybody,

--A