Home   Archive   Permalink



Image Overlays

Hi, I'm still very new to Rebol. I've been kinda holding out until R3 was around. Recently I checked and noticed that it seems viable now :) Yay!
    
I'm interested in being able to make programs that run the same on my computer as they do on my phone and tablet. This will make it easier for me to develop programs for my kids.
    
Through my learning of Rebol, I have found it to be fairly easy to specify an xy pair to locate images within a window and therefore overlay them in Rebol 2, however I have not been able to figure out how to do that in R3. I note that r3-Gui seems to be implemented for Windows, and it seems to have similar support for Android, but I can't find any documentation or examples that show how to place images at exact xy coordinates.
    
Can someone tell me if it is possible to do this yet? And if so, how?
    
Thank you :)

posted by:   mothdragon     29-Jul-2014/21:10:16-7:00



Can't help you, but I am struck by your comment:    
    
"can't find any documentation or examples"
    
I'm glad to know it's not just me.

posted by:   Steven White     30-Jul-2014/11:00:17-7:00



Thanks Steven :)
    
I have actually made some headway by deconstructing examples that initially seemed unrelated.
    
Ultimately this site (http://learnrebol.com/rebol3_book.html) has been the most helpful that I've found so far. There's a lot of just "look at what Rebol can do" at the beginning... But once you get to section 3 it really starts to explain things more.
    
Hope that helps :) If I've managed to puzzle out an answer to my own question before someone else does, I'll post my findings here :)

posted by:   mothdragon     30-Jul-2014/19:30:34-7:00



So I've pruned this down and cobbled it together from the "Catch Game.r3" example in the link from the last post, and this is what I've got:
    
R E B O L [title: "Catch Game"]
load-gui
BG: load %"./Data/img/Card Base grass.png"
Frame: load %"./Data/img/basic.png"
    
stylize
[
    pc1: image
    [
     facets:
     [
        max-size: 387x557
        min-size: 387x557
     ]
    ]
    
    pc2: image
    [
     facets:
     [
        max-size: 410x580
        min-size: 410x580
     ]
    ]
]
view/no-wait/options
[
    text "Create your own Pokemon card!"
    cardBk: pc1 (BG)
    cardEv: pc2 (Frame)
]
    
[
    min-hint: 600x700    
    max-hint: 600x700
    bg-color: white
]
    
forever
[
    cardBk/gob/offset: 36x66
    cardEv/gob/offset: 20x50
    draw-face cardBk
    draw-face cardEv
    show-now cardBk
    show-now cardEv
]
    
    
It does successfully display the images over top of each other as desired! But...
I must keep the view/no-wait/options. If I change that to just view, then I don't have control over the coordinates of the images, and they wind up being displayed one after another instead. Also, there is a forever loop at the end. This binds up the system, and makes it so that it can't exit properly. On Windows, the mess get's cleaned up after you force the app to shut down. On Android however, I must literally reboot my device before launching the app again. If I don't, then all I get when I launch the app is a black screen.
    
So at this point, I need to understand, how can I clean this up so that I'm not binding the system in a forever loop, and how can I use less code? Knowing that in Rebol everything uses less code than other languages, I'm quite shocked at the amount of code that I've used here. I believe there must be a better way.

posted by:   mothdragon     30-Jul-2014/20:53:49-7:00



Try this:
    
R E B O L [title: "image overlay"]
do %r3-gui.r3
BG: load %./Data/img/Card Base grass.png
Frame: load %./Data/img/basic.png
        
view/no-wait/options [
     text "Create your own Pokemon card!"
     cardBk: image 387x557 BG
     cardEv: image 410x580 Frame
] [
     min-hint: 600x700    
     max-hint: 600x700
     bg-color: white
]
        
cardBk/gob/offset: 36x66
cardEv/gob/offset: 20x50
    
do-events

posted by:   Nick     31-Jul-2014/13:47:56-7:00



The 'forever loop is only required in the game, because, in that program, the screen is repeatedly updated by some specific computations (the forever loop provides a simple method of "multitasking"). 'do-events just starts the normal event loop built into the GUI system.

posted by:   Nick     31-Jul-2014/13:53:09-7:00



Thanks Nick!
    
I've tried the code above on Windows. I've found that I still need to include the draw-face cardEv, otherwise it's clipped. It seems that it's clipped because it's drawn to the limits of the "hint" and then the gob offset is applied.
    
Another observation is that when the window is resized, the objects snap to their "normal" layout positions... I'd rather avoid that if possible...

posted by:   mothdragon     31-Jul-2014/21:14:07-7:00



Also when rotating the screen in android the view is erased altogether, leaving only the console which displays. "Fetching GUI"... it seems that I need to force a redraw when resizing or rotating. I think that would likely be the same routine.
    
I have another thing which may be solved at the same time... Ultimately I want to change the images depending on the option selected in a drop down. I've managed to get an if statement structure that responds to the choices in the drop-down. However combinations of draw-face and show-now don't make any changes in the actual graphics being drawn... When I first tried this in R2, I had the same problem. Can't get the graphics to change.
    
Grrr...
    
Any help would be greatly appreciated!

posted by:   mothdragon     3-Aug-2014/0:13:14-7:00



To change images depending option in a drop-down:
-1rst example-
R E B O L []
    
do %r3-gui.r3
    
img: load %img.jpg
img2: load %img2.jpg
    
view [
    hgroup [
        drop-down ["img" "img2"]
        on-action [
                 img_arg: pick [img img2] arg
             remove-content gr
                 append-content gr compose [image (img_arg)]
    
        ]
    
    
    ]
    gr: htight [image img]
    
]
    
-2nd example-
R E B O L []
    
do %r3-gui.r3
    
img: load %img.jpg
img2: load %img2.jpg
    
view [
    hgroup [
         button "img" on-action [
                    show-face p1 'visible
                    show-face p2 'ignored
                    ]
        button "img2" on-action [
                    show-face p1 'ignored
                    show-face p2 'visible
                    ]
    
    ]
    htight [
                     p1: image img options [show-mode: 'ignored]
                     p2: image img2 options [show-mode: 'visible]
                 ]
    
]


posted by:   Jean-Louis     4-Aug-2014/16:10:37-7:00



Sweet! That is so much cleaner than the code I have right now. Thanks so much Jean-Louis. Racing away to try it now ;)

posted by:   mothdragon     4-Aug-2014/19:48:20-7:00



Thanks again Jean-Louis! I've been able to get the first example you gave to work. I never tried the second as the number of images makes that one ungainly. Unfortunately, to get the images changing, I've had to sacrifice overlaying the images, which completely defeats the purpose of my app :( I need to be able to combine the effect provided by Nick earlier and that now provided by Jean-Louis.
    
I know it has to be possible to do both at the same time..
    


posted by:   mothdragon     6-Aug-2014/18:52:34-7:00



So I think I may have found a way to have both! I've found that I can use gob's and locate them exactly where I want them. It seems feasible that I'd be able to combine that with the drop-down selection as well... Problem is, I can't seem to combine a gob with any other gui elements.... In theory I should be able to add a gob to a view. However, I can't seem to figure out how to do that. I can add an image to a gob, and in theory I can convert a gob to an image. However, my attempts to convert a gob to an image have yielded only a black rectangle.
    
A friend suggested that perhaps I'm taking the backwards path now. He's relatively familiar with R2, but has no idea how to do what I want to do in R3. Am I going the wrong direction? Am I missing something obvious? Am I over complicating things?

posted by:   mothdragon     10-Aug-2014/23:55:40-7:00



I do not understand what you'd like to do..
Some examples:
----------------------------------
view/no-wait m: layout [field "hello"]
    
;We need to get the BACKDROP container which is first sub-face in the WINDOW face
m: first faces? m
    
append-content m [
     field "world"
]
    
do-events
-------------------------------------
To use set-content, insert-content, clear-content, apppend-content... have a look at
https://github.com/saphirion/documentation/blob/master/r3/r3-gui/examples/layouts/layout-20.r3

posted by:   JeanLouis     11-Aug-2014/7:57:36-7:00



Thanks Jean-Louis. What I'm trying to do is make an app which enables the user to create custom playing cards. Depending on the values in the various drop-downs, the final image on the card will be updated in real time, and ultimately enable the user to print the new card.
    
I haven't looked at the printing aspect of things yet, because I can't get the card image to update properly yet. It seems that I can have the update but in separate images around the layout, or I can have all the images combined without being able to change them.
    
I hope that clears things up a bit :) I'm going to try the code you've just offered, but at the moment I'm completely unsure of how to use it. My first attempts at integrating your newest code with my gob experiment has yielded no changes in the app whatsoever that I can see.
    
Also as a note, for the most part I'm doing all of this entirely from my android phone.
    
Thanks again.

posted by:   mothdragon     12-Aug-2014/7:01:19-7:00



Just a comment with rebol3 on Windows.
The effect provided by Nick:
    
cardBk/gob/offset: 36x66
cardEv/gob/offset: 20x50
        
do-events
    
If I resize the window with the mouse, the initial positions are restored (images are not at 36x66, 20x50).

posted by:   JeanLouis     12-Aug-2014/17:08:25-7:00



Yeah I noticed that to. But if you make it so the window isn't resizable, then that works around it. I'd have my window that way anyway. I used min-hint and max-hint options for the view.

posted by:   mothdragon     12-Aug-2014/17:38:56-7:00



R E B O L [title: "image overlay"]
do %r3-gui.r3
BG: load %bg.png
Frame: load %fr.png
img: load %img.png
            
view/no-wait/options m: layout [
     text "Create your own Pokemon card!"
     drop-down ["Frame" "img"]
         on-action [
                 img_arg: pick [Frame img] arg
                    remove-content/pos/part m (length? m/gob) 1
                    append-content m compose [image 410x580 (img_arg)]    
         ]
     cardBk: image 387x557 BG
     cardEv: image 410x580 Frame
] [
     min-hint: 600x700    
     max-hint: 600x700
     bg-color: white
]
            
cardBk/gob/offset: 36x66
cardEv/gob/offset: 20x50
m: first faces? m
        
do-events


posted by:   JeanLouis     12-Aug-2014/17:39:59-7:00



I really appreciate all your help Jean-Louis!
    
I don't understand what's going on precisely in this code... It looks like you've created an object called m which somehow represents the images. Then with remove-content you somehow address the second image... Unfortunately append-content doesn't seem to do anything ... When I select any option from the drop-down the Frame disappears leaving only BG without any offset. The Frame doesn't seem to get rendered offscreen anywhere either. I've tried it on both my phone and Windows.
    
When I take out the no-wait option in hopes of being able to see any errors on the android console, the app fails to run completely.

posted by:   mothdragon     13-Aug-2014/7:13:10-7:00



I do not have your image files, I use 3 jpg files. This script makes something, the images have different positions.
m: first faces? m
sets m to the object layout which has several graphic components.
length? m/gob
gives the number of objects in the layout:
1 text, 1 drop-down, 1 cardBk image, 1 cardEv image.
remove-content/pos/part m (length? m/gob) 1
removes the last object in the layout
append-content m compose [image 410x580 (img_arg)]
adds at the end of the layout 1 image object with the selected image.

posted by:   JeanLouis     13-Aug-2014/7:36:06-7:00



Hmm. I don't understand why this code doesn't work. It seems as though the append-content isn't working as expected. The image files are good. If I switch append to an insert the expected image file loads, but of course replaces the BG imageaswell. The text and drop-down then appear below the Frame image.

posted by:   mothdragon     14-Aug-2014/6:50:49-7:00



I got it to work! Jean-Louis I happened across your thread about the GUI and offsets right next to this thread. It had the critical piece I was missing. In your code example you refered to the offsets there. Combining that with your drop-down example here I've got it working. Thank you so much for all your help! :)

posted by:   mothdragon     14-Aug-2014/17:19:45-7:00