1080p tiled GUI

24

Comments

  • JRoarkJRoark Posts: 564
    edited 2020-03-03 - 22:33:38
    Is this where we nudge Chip for another 8 cores? Lol!
  • RaymanRayman Posts: 11,372
    edited 2020-03-04 - 01:43:14
    Just got this graphical slider working!

    I was hoping this was going to work out...
    Uses the cogless graphics to update in real time.
    Because the area is so small it's very smooth.
    I'm using the graphics bitmap area as the scratch pad and then copy over to the area set aside for this control when done.
    Working out as well as I hoped...

    There are all kinds of other graphical controls and indicators we can do this way.
    Things like rotary knobs, analog dials, clock, etc...
    2016 x 1512 - 792K
  • That's pretty cool. You are on the way to having a real GUI for apps.
  • Added option for ticks on slider.
    Also, rounded button option.

    Added a new test form that shows 3 sliders to pick a color and then shows best fit from palette.

    BTW: I'm not sure I'm sold on this xterm palette...
    There are too many light and not enough dark colors.
    I may switch to this netscape palette and add some extra greys:
    http://www.columbia.edu/itc/visualarts/r4110/f2000/week06/06_03_Color_palettes.pdf
    2016 x 1512 - 895K
    2016 x 1512 - 1M
  • cgraceycgracey Posts: 13,079
    edited 2020-03-04 - 19:44:02
    Wow! That's very clean looking. Good job!

    That would be really neat to have a bare-bones GUI that could be configured for all kinds of custom apps.

    Mouse and Keyboard in, screen out, and whatever you want to add for signal interfacing.
  • RaymanRayman Posts: 11,372
    edited 2020-03-04 - 20:27:51
    Here is the source and binary for the latest version.
    I now have the mouse updating with vsync so it shows more smoothly.

    But, I have noticed with the "Cogless Graphics Demo" that if you don't poll the mouse continuously, you will lose update information and the mouse becomes sluggish.

    I need to either use an interrupt and/or add constant polling to one of the cogs...
    But, it's fine now as long as the main cog isn't being bogged down by something in idle processing...
  • How about the VGA palette? I used to think it was awful, but turns out that it actually quantizes very well and it has 16 grays. The alternative is the SNES palette, but it doesn't have any grays.
  • I guess you mean this one:
    https://www.fountainware.com/EXPL/vga_color_palettes.htm

    It'd be nice to have a palette with named colors, so you can use their names as constants in code.
    But, this GUI isn't tied to a particular palette. Someone could use whichever they wanted...

    Seems netscape palette is now called net-safe palette.
    I'm trying to find a list of names for those colors, but haven't found it yet...
  • I found this page where you can enter in a hex color and get a name:
    https://www.htmlcsscolor.com/hex/FF6633

    This might work to get names for new palette, but tedious...
  • RaymanRayman Posts: 11,372
    edited 2020-03-05 - 14:38:42
    Just thinking about expanding the vector font...
    Searching the web I found this project using the "Hershey" vector font:
    https://www.element14.com/community/groups/open-source-hardware/blog/2017/12/31/experimenting-with-e-paper-displays-building-a-clock
    Which led me to here:
    http://paulbourke.net/dataformats/hershey/

    This one is actually pretty interesting... ~4000 characters...

    Chip's vector font is a bit more advanced in that includes arcs whereas this is all just straight lines.
    Still, the curves on large characters on that first link looked pretty smooth...
  • The vector font in graphics.spin is maybe 25x more compact than the line fonts described in those links.
  • RaymanRayman Posts: 11,372
    edited 2020-03-05 - 15:51:42
    That is a bit of an issue... The Hershey font file size comes in at 106 kB for all ~4000 characters...

    You'd probably want to store them in flash or hyper-something...

    But, certain subsets might be OK for COG RAM...
  • I added a vertical slider and also support for drawing Hershey font characters...

    This section produces the characters in the green area next to the vertical slider in the pic below:
    Form1Vector1  long 'Graphical Vector Font String using Hershey format
                long    10              '0 type 10=Graphical Vector Font String
                long    0               '1 top=y-offset from graphics origin
                long    0               '2 left=x-offset from graphics origin 
                long    512             '3 width scale  256=1X
                long    512             '4 height scale 256=1X
                long    0               '5 data
                long    1               '6 color number (0..3)
                long    2               '7 width to draw with
                long    Form1Graphic1   '8 graphics area on which to draw
                byte    "16MWOMOV ROMSMUNUPSQ ROQSQURUUSVOV",13
                byte    "48F^RTTWVXXXZW[U[SZQXPVPSQ RSQUOVMVKUISHQHOINKNMOOQQ RQQNPLPJQISIUJWLXNXPWRT RRTQYP\ RRTSYT\ RP\T\",13
                byte    "11MXVNTMRMPNOPOSPURVTVVU",0
    

    This font probably isn't particularly useful, but was fun to do!
    1512 x 2016 - 358K
  • If you can get keyboard, mouse, and file I/O working with that, we'll have a computer.
  • cgraceycgracey Posts: 13,079
    edited 2020-03-06 - 01:04:17
    It would be so neat to have the basis of a computer that we could hone over time, to keep it very efficient and clean. It could be the genesis of all kinds of projects.
  • I agree
  • jmgjmg Posts: 14,495
    cgracey wrote: »
    If you can get keyboard, mouse, and file I/O working with that, we'll have a computer.

    This display work by Rayman, is ahead of what is needed by this :
    http://www.projectoberon.com/home
    "Project Oberon is a design for a complete desktop computer system from scratch. Its simplicity and clarity enables a single person to know and implement the whole system, while still providing enough power to make it useful and usable in a production environment."

    That is based on 1024 x 768 pixel, monocolor display frame, and includes fonts.
  • yeah, but Oberon has a very poor and complicated user interface.

    OK maybe some people like it, but what @Rayman is doing here is way more intuitive for GUI orientated persons.

    This is very interesting, slowly all things come together, KBD/MOUSE/VGA and half of the P2 still usable.

    Enjoy!

    Mike
  • I hope that Peters P2D2 plus the companion boards will give a compact hardware base to have a unified solution. As a lot of hurdles are being set by small deviations, changing pin numbers etc. Unified hardware is a key feature for success. Any updates, Peter?
  • Added progress bar...
    I may add option to draw current value in the middle.

    Next, want to take on rotary dial.
    2016 x 1512 - 367K
  • Wow! I think it only takes a handful of graphics objects to build a GUI.

    Buttons
    Switches
    Radio Buttons (1 active at a time)
    Slider Control
    Scroll Bar
    Edit Line
    Edit Window
    Bitmap

    That's got to be over half of what's needed, at the lower level.
  • ElectrodudeElectrodude Posts: 1,434
    edited 2020-03-08 - 03:04:59
    Considering the complexity of even a half-decent edit window - with copy and paste, undo/redo, autoindent, syntax highlighting, a gutter with line numbers and bookmarks and debugger breakpoints, etc., etc., I'm not sure an edit window can be said to fit in a "handful". There's a whole class of computer programs - i.e., text editors - that are nothing more than glorified text editor boxes.
  • Yeah, text edit is both the most difficult to implement and perhaps the least needed control for a GUI for equipment.

    Numeric entry can be useful and not as difficult...
  • I just figured out I can put all the form data in a separate file and then #include it in the main file like this:
    DAT 'Form data include
    #include "TestForms_5m.spin2"
    

    What is interesting is the position of this #include in the main file matters.
    If I put it before PUB Main, it compiles but gives a blank display.
    If I put it just after PUB Main, it works as expected.
    If I put it where that data used to be, I get errors because earlier code in main file can't resolve references to address names in the form data.

    I had to add in the enumerated list of color names and also "rows" and "cols" for this to work.
    But now, I can actually compile the form data independently to check for size.

    I might try moving some of the specialized code for handling the forms over here too.
    This might turn out to be very convenient going forward...
  • RaymanRayman Posts: 11,372
    edited 2020-03-09 - 16:30:42
    I've implemented a rotary dial (orange) and some graphical buttons (green/white) both using the cogless graphics...
    2016 x 1512 - 678K
  • Very cool stuff Ray.
  • It would be easy to use if, when you brought the mouse over the rotary control, the scroll wheel turned the knob.
  • Yes, when you hold down the left mouse button on the dial, it moves to match.
  • I think he meant the mouse scroll wheel (z-axis) would turn the dial.
  • Oh, right. Interesting idea. I'm not even sure if the mouse driver provides wheel info...
    I'll look ...
Sign In or Register to comment.