I want to create a wizard for the logo badge below with 3 parameters. I can make the title dynamic but for image and gradient it's hardcoded because I can't see how to make them dynamic. Code follows after pictures:
alt text http://reboltutorial.com/bugs/wizard1.png
alt text http://reboltutorial.com/bugs/wizard2.png
custom-styles: stylize [
lab: label 60x20 right bold middle font-size 11
btn: button 64x20 font-size 11 edge [size: 1x1]
fld: field 200x20 font-size 11 middle edge [size: 1x1]
inf: info font-size 11 middle edge [size: 1x1]
ari: field wrap font-size 11 edge [size: 1x1] with [flags: [field tabbed]]
]
panel1: layout/size [
origin 0 space 2x2 across
styles custom-styles
h3 "Parameters" font-size 14 return
lab "Title" fld_title: fld "EXPERIMENT" return
lab "Logo" fld_logo: fld "http://www.rebol.com/graphics/reb-logo.gif" return
lab "Gradient" fld_gradient: fld "5 55 5 10 10 71.0.6 30.10.10 71.0.6"
] 278x170
panel2: layout/size [
;layout (window client area) size is 278x170 at the end of the spec block
at 0x0 ;put the banner on the top left corner
box 278x170 effect [ ; default box face size is 100x100
draw [
anti-alias on
line-width 2.5 ; number of pixels in width of the border
pen black ; color of the edge of the next draw element
fill-pen radial 100x50 5 55 5 10 10 71.0.6 30.10.10 71.0.6
; the draw element
box ; another box drawn as an effect
15 ; size of rounding in pixels
0x0 ; upper left corner
278x170 ; lower right corner
]
]
pad 30x-150
Text fld_title/text font [name: "Impact" size: 24 color: white]
image http://www.rebol.com/graphics/reb-logo.gif
] 278x170
main: layout [
vh2 "Logo Badge Wizard"
guide
pad 20
button "Parameters" [panels/pane: panel1 show panels ]
button "Rendering" [show panel2 panels/pane: panel2 show panels]
button "Quit" [Unview]
return
box 2x170 maroon
return
panels: box 278x170
]
panel1/offset: 0x0
panel2/offset: 0x0
panels/pane: panel1
view main
Make the block for the 2nd layout a template.
Put the variables you want there and surround with ( )
When rendering, do a copy/deep to make a template copy, then compose/deep to replace the variables as taken from the parameters screen, create the layout from your copy of the template and set the pane to the new layout.
Related
I can't make the height of the label exactly the height of the font, there is a gap at the bottom. Can you please tell me how to remove it? my label image
Label
{
id: autoLabel
leftInset: 0
topInset: 0
bottomInset: 0
background: Rectangle
{
anchors.bottomMargin: 0
color: "white"
border.width: 0
}
Text
{
id: autoText
anchors.fill: autoLabel
anchors.leftMargin: 0
anchors.topMargin: 0
anchors.bottomMargin: 0
color: PendulumStyle.primaryTextColor
text: "AUTO"
font.family: PendulumStyle.fontFamily
font.pixelSize: 35
font.styleName: "Bold"
padding: 0
}
width: autoText.contentWidth
height: autoText.contentHeight
x: mainRectangle.x + 30
y: checkBox.y - checkBox.height / 2
}
The Label actually IS the size of your font. The text you're using just doesn't show it. Fonts have a concept of an ascent and descent above and below the baseline.
The ascent is the distance from the baseline to the top of the tallest character, and the descent is the distance from the baseline to the bottom of the lowest character. (Those might not be the technical definitions, but at least how I think of them. i.e. There may still be padding, etc.) So therefore, the total height of a font should be (ascent + descent).
In your case, you've used the word "AUTO". None of those characters go below the baseline. But the font height stays the same no matter what text you use.
If you still want your Rectangle to just fit around the word "AUTO", then it should just use the ascent height, and ignore the descent. To do that, QML provides a FontMetrics object that can help you.
Label
{
id: autoLabel
width: autoText.contentWidth
height: fm.ascent
FontMetrics {
id: fm
font: autoText.font
}
background: ...
Text
{
id: autoText
text: "AUTO"
font.family: PendulumStyle.fontFamily
font.pixelSize: 35
font.styleName: "Bold"
}
}
As the title says, I can not apply an overlay on top of an overlay. More specifically, I have these layers:
background
video
stickers
And I want to create a fourth layer, on the size of 1 and 3rd layer. So the order I want to have is:
white layer
background
video
stickers
Following the documentation I came up with:
const command = [
'-y', // always overwrite file
'-loop', '1', // one time
'-i', dataObject['bg_src'], // bg image
'-i', dataObject['videos']['main']['src'], // video
'-i', dataObject['fg_src'], // sticker image
'-i', dataObject['fg_src'], // bg image2
'-preset', 'veryfast', // fast encoding
'-crf', '23', // quality
'-vcodec','libx264', // codec
'-t', '3', // time threshold
'-loglevel', '24', // verbose level
'-filter_complex',
'[0:v]pad=ceil(iw/2)*2:ceil(ih/2)*2[bg_src];' + // bg_src: to make width even, export it as [bg_src]
'[2:v]pad=ceil(iw/2)*2:ceil(ih/2)*2[fg_src];' + // fg_src: to make width even, export it as [fg_src]
'[3:v]pad=ceil(iw/2)*2:ceil(ih/2)*2[fg_src2];' + // bg_src: to make width even, export it as [fg_src2]
'color=white,format=rgb24[white_canvas];' + // create white background
'[white_canvas][fg_src2]scale2ref[b][a];' + // make white background same size as [fg_src2]
'[a][b]overlay=0:0[white_canvas_scaled];' + // export it as white_canvas_scaled
'[1:v]scale=%s:-1[video_scaled];' + // video: scale it (width is injected here)
'[white_canvas_scaled][video_scaled]overlay=%s:%s:shortest=1[bg];' + // white background & scaled video
'[bg][bg_src]overlay=0:0[bg2]', // bg_src overlay here
'[bg2][fg_src]overlay=0:0', // fg_src overlay here
FileService.photoPath + '/output.mp4'];
But in last command fails and I receive:
Unable to find a suitable output format for '[bg2][fg_src]overlay=0:0'
What is wrong?
Missing semicolon ( and '+' ) near end of filter?
I draw a dynamic callgraph with Roassal from within a Glamour browser in Pharo 2.0.
By default not only the nodes, but also the edges are clickable.
As i have no further information to display for the edges, i want them not to be clickable. How do i remove the "clickability"?
That's how i draw the callgraph from within a Glamour browser:
methodsUnderTestAsCallGraphIn: constructor
constructor roassal
painting: [ :view :testFailure |
view shape rectangle
size: 30;
fillColor: ThreeColorLinearNormalizer new.
view nodes: (tests methodsUnderTest: testFailure).
view shape arrowedLine.
view edges: (tests methodsUnderTest: testFailure) from: #yourself toAll: #outgoingCalls.
view treeLayout ];
title: 'Callgraph of methods under test'
I think GLMRoassalPresentation>>renderOn: is responsible for adding the "clickability":
[...]
self shouldPopulateSelection ifTrue: [
aView raw allElementsDo: [:each |
each on: ROMouseClick do: [:event | self selection: each model ]] ].
[...]
I want to to keep this behaviour for the nodes, but not for the edges.
It helps to have a self contained example to clarify the behaviour you want, so I've re-framed your question.
With the two commented-out lines , I guess is the behaviour you don't want. Does uncommmenting those two lines provide the behaviour you want?
browser := GLMTabulator new.
browser column: #myRoassal ; column: #mySelection.
browser transmit
to: #myRoassal ;
andShow:
[ : aGLMPresentation |
aGLMPresentation roassal
painting:
[ : view : numbers | |edges|
view shape rectangle ; withText ; size: 30.
view nodes: numbers.
view interaction noPopup.
view edges: numbers from: [ :x | x / 2] to: [ :x | x ].
" view edges do: [ :edge | edge model:#doNotSelectMe ]."
view treeLayout.
].
].
browser transmit
to: #mySelection ;
from: #myRoassal ;
" when: [ :selection | selection ~= #doNotSelectMe ] ;"
andShow:
[ : aGLMPresentation |
aGLMPresentation text
display: [ : selectedItem | selectedItem asString ]
].
browser openOn: (1 to: 10).
Unfortunately, this is not possible at the moment because the clicking is hardcoded in GLMRoassalPresentation. However, you are right that we should find a solution, so I opened an issue:
http://code.google.com/p/moose-technology/issues/detail?id=981
I am not sure what you mean by "clickability". You have no interaction defined, so the default interaction is a simple popup. If you want to remove the popup, then just insert a "view interaction noPopup". Try this in a fresh Roassal easel:
view shape rectangle size: 40.
view nodes: #(1 2).
view interaction noPopup.
view edgesFrom: 1 to: 2.
I could not find a way to get vertical labels in a Roassal visualization. Is there a way? Or a general way to rotate elements?
The new version, Roassal2, does supports rotated labels.
In the case of the example above, now you can do:
| view |
view := RTView new.
-15 to: 10 do: [ :i |
view add: ((RTRotatedLabel new angleInDegree: -90) elementOn: 'hello world').
].
RTHorizontalLineLayout on: view elements.
view open
You will get:
Another example:
| v shape |
v := RTView new.
shape := RTRotatedLabel new.
shape angleInDegree: [ :cls | cls numberOfMethods negated / 1.5 ].
shape text: [ :cls | ' ', cls name ].
shape color: (Color black alpha: 0.2).
v addAll: (shape elementsOn: Collection withAllSubclasses).
v canvas color: Color white.
v open
You will have:
I hope it helps :-)
Currently, Roassal does not support such a feature. However you can get something close to.
| view |
view := ROView new.
-15 to: 10 do: [ :i |
view add: ((ROLabel verticalText interlineSpace: i) elementOn: 'hello world').
].
ROHorizontalLineLayout on: view elements.
view open
In Roassal 1.422
Why are my buttons not positioned at 0x0 within the box panels ?
main: layout [
size 680x400
origin 0x0
space 0x0
pad 0x0
at 0x0
across
Menu1: box brick 200x200
return
Menu2: box blue 200x300
]
Menu1-items: layout [
origin 0x0
space 0x0
at 0x0
button "1"
button "2"
button "Quit" [quit]
]
Menu2-items: layout [
origin 0x0
space 0x0
at 0x0
button "3"
button "4"
]
Menu1/pane: Menu1-items
Menu2/pane: Menu2-items
Show Menu1
Show Menu2
View Main
The menu1-items layout itself has a default offset. Ditto for menu2-items.
There are two ways to address that. I've used one method for menu1-items, and the other for menu2-items. Pick the one you prefer:
main: layout [
size 680x400
origin 0x0
space 0x0
pad 0x0
at 0x0
across
Menu1: box brick 200x200
return
Menu2: box blue 200x300
]
Menu1-items: layout/offset [ ;; added /offset
origin 0x0
space 0x0
at 0x0
b1: button "1"
button "2"
button "Quit" [quit]
] 0x0 ;; added 0x0 for value of /offset refinement
Menu2-items: layout [
origin 0x0
space 0x0
at 0x0
button "3"
button "4"
]
menu2-items/offset: 0x0 ;; inserted setting of /offset variable
Menu1/pane: Menu1-items
Menu2/pane: Menu2-items
Show Menu1
Show Menu2
View Main
Another similar solution is to use the /tight refinement of layout like this :
Menu1-items: layout/tight [
space 0x0
button "1"
button "2"
button "Quit" [quit]
]
Menu2-items: layout/tight [
space 0x0
button "3"
button "4"
]
Another approach would be to use PANEL element instead of BOX for having the sub-layouts inlined in one big block.