advanced view example... for Paul
[1/4] from: media:quazart at: 25-Oct-2001 9:32
Hello World,
Paul is investigating View... I am currenlty working on a tool which could
help you see some direct view useage. The tool integrates VID and direct
view manipulation...
I thought it could help some of you to go through it...
This is a working although completely useless (fopr now) application. I'm
sharing it at this stage mainly for UI learning. Also note the different
approach to setups (using styles, pre-built faces, dynamic face, static face
assignment, etc) are all different solutions I ended up while researching
how view and VID relate to each other... starting from scratch now, I would
really code the tool in a more homogenous way...
It is NOT optimized, not very commented, but still strikes a nice balance
between advanced and simple (I find)...
I also was impressed at the speed that the timeline has.
change the timeline's in and out points by pressing on in/out and dragging
the mouse...
here goes!
-MAx
-- Binary/unsupported file stripped by Listar --
-- Type: image/png
-- File: polished.png
-- Attached file included as plaintext by Listar --
-- File: whip.r
REBOL[
title: "whip"
author: "moa"
date: 2001/10/09
version: 1.0.0
]
;--------------------------------------
;--- global data
;---
timeline-size: 300x65
tracksize: 20 ;height of each track in timeline
timeruler: 10 ; one bar every x frames
timeruler-offset: 1 ;the offset of the first bar
timeruler-color: 120.120.120
cut-req: none
timeline-tracks: 0 ; how many tracks in the timeline
shot-list: [] ; description of shots in the timeline (there can be multiple segments
per shot)
time-in: -3 ; where the timeline starts
time-out: 53 ; where the timeline ends
bg-image: load %polished.png
gbl-segment-list: [
[
;name in length command
;------------------------------------------------
[track-name: "track1" track-color: 0]
["*1" 1 10 "render3d" ]
["*2" 21 10 "fixedframe 200"]
["*3" 41 10 "BLA"]
["*4 " 11 10 "render3d" ]
["*5 " 31 10 "render3d" ]
][
[track-name: "Total Track" track-color: 1]
["*10" 1 40 "BLA"]
]
]
color-list: [
100.150.255
140.200.120
200.140.140
150.160.180
140.180.150
190.170.170
190.190.140
210.180.100
180.170.190
190.140.210
100.190.180
160.160.160
]
;--------------------------------------------------
;---
;--- OBJECTS
;---
;--------------------------------------------------
;------------------------
;--- segment!
;------------------------
segment!: make object! [
name: none
in: 1
length: 1
command: none
from-blk: func [ datablk ][
name: to-string first datablk
in: second datablk
length: third datablk
command: fourth datablk
]
]
;------------------------
;---
;--- active-thing
;---
;--- note: currently used only for segments
;---
active-thing: make face [ ; the currently selected "thing".
data: none ; the name of the shot (can be then be retrieved from segment list...)
type: ; the type of data which is refered by data
face: none ; the face which is associated with this data
active-edge: ; the edge object which is used on the active segment
make object! [
color: black
effect: none
size: 2x2
]
normal-edge: ; the edge object which is used on normal segments
make object! [
color: 140.140.140
effect: 'bevel
size: 1x1
]
normal-font: make object! [
name: "arial"
style: 'bold
size: 10
color: 255.255.255
offset: 2x2
space: 0x0
align: 'center
valign: 'middle
shadow: 1x1
colors: [255.255.255 255.180.55]
]
active-font: make object! [
name: "arial"
style: 'bold
size: 10
color: 255.0.0
offset: 2x2
space: 0x0
align: 'center
valign: 'middle
shadow: 1x1
colors: [255.255.255 255.180.55]
]
]
whip-look: make face [
thin-edge: make edge [
color: 140.140.140
size: 1x1
effect: 'bevel
]
thin-iedge: make edge [
effect: 'ibevel
color: 140.140.140
size: 1x1
]
button-font: make font [
size: 10
color: white
shadow: 1x1
]
button-hifont: make button-font [
color: 140.180.255
]
]
;-------------------------------------------
;---
;--- STYLES
;---
;-------------------------------------------
q-style: stylize [
sbutton: button %polished.png 75x20
with [font: whip-look/button-font]
edge [size: 1x1 color: 150.150.150]
effect [ tile
contrast 10
gradmul 0x1 130.130.130 70.70.70
;draw ['pen 0.0.255 'box 0x0 (face/size) ]
]
feel [
over: func [face action event] [
either action [
face/font: whip-look/button-hifont
show face
][
face/font: whip-look/button-font
show face
]
]
]
vtext: vtext with [feel: none]
groupname: vtext "qtitle" 50x22 edge [effect: 'bevel color: 128.128.128 size: 1x1] %polished.png
effect [contrast 20 tile gradcol -1x0 110.110.110 80.90.100]
;button: button %polished.png edge [size: 1x1 color: 160.160.160] effect [tile contrast
30 colorize 180.180.180]
ibutton: button 160.160.160 edge [size: 1x1 color: 140.140.140] effect [gradmul 0x-1
140.140.140 100.100.100]
title: box 150.170.190 font [size: 12 style: [bold ] space: 1x0 ] para [scroll: 0x-1]
shadow 1x1 edge [size: 1x1 color: 140.140.140 effect: 'bevel] effect [gradmul 0x1 140.140.140
100.100.100]
titleb: button 150.170.190 edge [size: 1x1 color: 140.140.140 effect: 'bevel] effect
[gradmul 0x1 140.140.140 100.100.100]
test: box edge [size: 1x1 color: 140.140.140 effect: 'ibevel ]
stext: vh3 220.180.20 shadow -1x-1 feel [engage: func [a1 a2 a3] [] over: none redraw:
none detect: none]
sfield: field 50x20 edge [size: 1x1] effect [gradient 1x1 100.150.240 0.60.120] font
[color: white]
titlebar: title feel [
engage: func [face action event][
either action = 'down [
face/data: event/offset
][
if find [away over] action [
win: face/parent-face
win/offset: win/offset + event/offset - face/data
show win
]
]
]
]
]
;--------------------------
;--- UI
;---
xaos-window: make object! [
wsize: 500x200
tsize: 480x15
tlabel: "Default Window"
wcontent: none
wpane: make face []
regen-window: func [][
tmp-win: layout [
styles q-style
across
space 0x0
origin 0x0
titlebar tlabel tsize edge [size: 1x1]
titleb "X" 20x15 [close] edge [size: 1x1]
return
wcontent: box para [margin: 2x2] wsize red * .75
]
wcontent/pane: wpane
window: tmp-win
]
window: none
setpane: func [newpane] [
newpane/offset: 0x0
wpane: newpane
if wcontent [
wcontent: newpane
print "HO"
]
autosize
]
autosize: does [
wsize: wpane/size
tsize: ((wsize * 1x0) + (-20x15))
;wcontent/offset: 0x0
if wcontent [
wcontent/offset: 0x0
print "HEY"
]
]
open: does [
regen-window
window/offset: 300x100
view/options window 'no-title
]
close: does [unview window ]
]
main-ui: [
tabs 60
styles q-style
;origin 0x0
backdrop %polished.png effect [contrast 20 tile gradcol 1x1 100.100.100 60.60.60]
across
space 0x20
do [
tbar: layout [
styles q-style
backdrop black
origin 2x3
space 0x0
across
pad 0x2
ttitle: groupname "projects"
return
sbutton "save"
sbutton "load"
sbutton "clear"
]
tbar/offset: 0x0
ttitle/size/x: tbar/size/x - 4
]
box with [pane: tbar size: tbar/size + 2x2] edge [size: 1x1 color: 140.140.140 effect:
'ibevel]
return
do [
tbar: layout [
styles q-style
backdrop black
origin 2x3
space 0x0
across
pad 0x2
ttitle: groupname "segment"
return
sbutton "new"
sbutton "edit"
sbutton "delete"
]
tbar/offset: 0x0
ttitle/size/x: tbar/size/x - 4
]
box with [pane: tbar size: tbar/size + 2x2] edge [size: 1x1 color: 140.140.140 effect:
'ibevel]
return
space 0x20
return
space 0x0
return
do [
tbar: layout [
styles q-style
backdrop black
origin 2x3
space 0x0
across
pad 0x2
ttitle: groupname "Timeline"
return
pad 0x2
timeline-box: box black (timeline-size + 2x1)
return
sbutton "in" 30 feel [
engage: func [face action event][
if action = 'down [
face/data: reduce [event/offset/x time-in ]
face/edge: whip-look/thin-iedge
show face
]
if action = 'up [
face/edge: whip-look/thin-edge
show face
]
if find [over away] action [
;probe face/data
time-in: ((first face/data) - event/offset/x) + second face/data
if time-in >= time-out [
time-in: time-out - 1
change next face/data (time-out - 1)
change face/data event/offset/x
]
;print [time-in "->" time-out]
timeline: build-timeline timeline-size time-in time-out
timeline-box/pane: timeline
show timeline-box
]
]
redraw: none
]
sbutton "out" 30 feel [
engage: func [face action event][
if action = 'down [face/data: reduce [event/offset/x time-out ] print "down"]
if find [over away] action [
;probe face/data
time-out: ((first face/data) - event/offset/x) + second face/data
if time-in >= time-out [
time-out: time-in + 1
change next face/data (time-in + 2)
change face/data event/offset/x
]
;print [time-in "->" first face/data "->" time-out]
timeline: build-timeline timeline-size time-in time-out
timeline-box/pane: timeline
show timeline-box
]
]
]
]
tbar/offset: 0x0
ttitle/size/x: tbar/size/x - 4
]
box with [pane: tbar size: tbar/size + 2x2] edge [size: 1x1 color: 140.140.140 effect:
'ibevel]
return
space 0x10
return
space 0x0
tab
vtext "start"
tab
vtext "end"
tab
vtext "dur."
tab
vtext "start"
return
tab
sfield
tab
sfield
tab
sfield
tab
sfield
]
;----------------------------------------------
;---
;--- FUNCTIONS
;---
;----------------------------------------------
;-------------------------
; build-segment-blk
;-------------------------
build-segment-blk: function [seglist] [segment segblk][
segblk: copy []
foreach datablk seglist [
segment: make segment! []
segment/from-blk datablk
append segblk segment
]
return segblk
]
;-------------------------
; build-timeline
;-------------------------
build-timeline: function [bar-size time-in time-out][time-pane out-point][
total-time: 0
segment-sizes: 0
;prin "bar: "
;probe bar-size
;prin "time in: "
;probe time-in
;prin "time out: "
;probe time-out
total-time: time-out - time-in
;prin "total time: "
;probe total-time
time-factor: bar-size/x / total-time
;prin "factor: "
;probe time-factor
segment-face!: make face[
color: 160.160.160
effect: [gradmul 0x-1 140.140.140 100.100.100]
offset: 0x0
edge: whip-look/thin-edge
font: whip-look/button-font
]
segment-face!/size/y: tracksize
time-pane: make face [
;--------------------------------
;--- create ruler
;--------------------------------
do [ fx: [
draw []]
lines: select fx 'draw
clear lines
repend lines ['pen timeruler-color]
repeat num (time-out - time-in) [
if (type? ((num + time-in - timeruler-offset ) / timeruler )) = integer! [
line-start: 0x0
line-start/x: num * time-factor
line-end: 0x100
line-end/x: num * time-factor
repend lines ['line line-start line-end red]
]
]
]
color: black
image: none
size: bar-size + 1x-1
offset: 0x0
pane: copy []
edge: make edge [color: white / 2 size: 1x1 effect: none]
effect: fx
]
; probe time-pane/feel
timeline-tracks: length? gbl-segment-list
yoff: 0
;---------------------
;-- create tracks
;---------------------
foreach track gbl-segment-list [
do first track
;print ["^/-----------^/--> TRACK: " track-name]
segblk: build-segment-blk next track
;---------------------
;-- create segments
;---------------------
foreach segment segblk [
;print ["^/->segment: " segment/name]
tmp-face: make segment-face! [
]
;------------------------
;--- CALCULATE IN-POINT
;---
tmp-face/offset/x: to-integer ((segment/in - time-in) * time-factor)
tmp-face/offset/y: yoff
;------------------------
;--- CALCULATE OUT-POINT (Size)
;---
;--- good version
;tmp-face/size/x: to-integer (segment/length * time-factor)
out-point: segment/in + segment/length - time-in
tmp-face/size/x: (to-integer (out-point * time-factor)) - tmp-face/offset/x
tmp-face/text: segment/name
tmp-face/para/wrap?: false
tmp-face/feel: make tmp-face/feel [
engage: func [face action event] [
print [action face/text]
if action = 'down [print "notepad" ]
redraw: func [a1 a2 a3] [print "rdraw"] ]
]
tmp-face/pane: make face [
size: tmp-face/size - 4x0
size/y: 3
offset: 1x1
color: first skip color-list track-color
edge: make edge [size: 1x1 color: white / 2 effect: 'ibevel ]
]
append/only time-pane/pane tmp-face
]
yoff: yoff + tracksize + 10
]
;prin ": "
;probe
return time-pane
]
;---------------------------------------------------
;--- START APPLICATION
print "-----------"
timeline: build-timeline timeline-size time-in time-out
;timeline/offset: 0x0
main-pane: layout main-ui
timeline-box/pane: timeline
xwin: make xaos-window []
xwin/setpane main-pane
gui_pic: to-image xwin/wpane
view layout [box gui_pic]
save/png %/z/programming/whip_ui.png gui_pic
browse %/z/programming/whip_ui.png
;xwin/open
[2/4] from: media::quazart::com at: 25-Oct-2001 10:07
OOPS!
I just noticed that the (small) image did not go through listar... ah well.
You must have the polished.png image from RT in the same drawer as the
script...
I also noticed that the attached script has some bad code at the end...
which was meant for saving a picture of the ui instead of opening it!!!
Just replace code at the end with:
;---------------------------------------------------
;--- START APPLICATION
timeline: build-timeline timeline-size time-in time-out
main-pane: layout main-ui
timeline-box/pane: timeline
xwin: make xaos-window []
xwin/setpane main-pane
xwin/open
-MAx
----- Original Message -----
From: "Media" <[media--quazart--com]>
To: "reblist" <[rebol-list--rebol--com]>
Sent: Thursday, October 25, 2001 9:32 AM
Subject: [REBOL] advanced view example... for Paul
> Hello World,
> Paul is investigating View... I am currenlty working on a tool which could
<<quoted lines omitted: 4>>
> sharing it at this stage mainly for UI learning. Also note the different
> approach to setups (using styles, pre-built faces, dynamic face, static
face
> assignment, etc) are all different solutions I ended up while researching
> how view and VID relate to each other... starting from scratch now, I
would
> really code the tool in a more homogenous way...
> It is NOT optimized, not very commented, but still strikes a nice balance
<<quoted lines omitted: 26>>
> timeline-tracks: 0 ; how many tracks in the timeline
> shot-list: [] ; description of shots in the timeline (there can be
multiple segments per shot)
> time-in: -3 ; where the timeline starts
> time-out: 53 ; where the timeline ends
<<quoted lines omitted: 56>>
> active-thing: make face [ ; the currently selected "thing".
> data: none ; the name of the shot (can be then be retrieved from segment
list...)
> type: ; the type of data which is refered by data
> face: none ; the face which is associated with this data
<<quoted lines omitted: 82>>
> vtext: vtext with [feel: none]
> groupname: vtext "qtitle" 50x22 edge [effect: 'bevel color: 128.128.128
size: 1x1] %polished.png effect [contrast 20 tile gradcol -1x0 110.110.110
80.90.100]
> ;button: button %polished.png edge [size: 1x1 color: 160.160.160] effect
[tile contrast 30 colorize 180.180.180]
> ibutton: button 160.160.160 edge [size: 1x1 color: 140.140.140] effect
[gradmul 0x-1 140.140.140 100.100.100]
> title: box 150.170.190 font [size: 12 style: [bold ] space: 1x0 ] para
[scroll: 0x-1] shadow 1x1 edge [size: 1x1 color: 140.140.140 effect:
'bevel] effect [gradmul 0x1 140.140.140 100.100.100]
> titleb: button 150.170.190 edge [size: 1x1 color: 140.140.140 effect:
'bevel] effect [gradmul 0x1 140.140.140 100.100.100]
> test: box edge [size: 1x1 color: 140.140.140 effect: 'ibevel ]
>
> stext: vh3 220.180.20 shadow -1x-1 feel [engage: func [a1 a2 a3] [] over:
none redraw: none detect: none]
> sfield: field 50x20 edge [size: 1x1] effect [gradient 1x1 100.150.240
0.60.120] font [color: white]
> titlebar: title feel [
> engage: func [face action event][
<<quoted lines omitted: 64>>
> ;origin 0x0
> backdrop %polished.png effect [contrast 20 tile gradcol 1x1 100.100.100
60.60.60]
> across
> space 0x20
<<quoted lines omitted: 16>>
> ]
> box with [pane: tbar size: tbar/size + 2x2] edge [size: 1x1 color:
140.140.140 effect: 'ibevel]
> return
> do [
<<quoted lines omitted: 15>>
> ]
> box with [pane: tbar size: tbar/size + 2x2] edge [size: 1x1 color:
140.140.140 effect: 'ibevel]
> return
> space 0x20
<<quoted lines omitted: 44>>
> engage: func [face action event][
> if action = 'down [face/data: reduce [event/offset/x time-out ] print
down
]
[3/4] from: greggirwin:mindspring at: 25-Oct-2001 11:32
Very cool Max!
It took me a minute to figure out that I had to click and drag the in or out
*button* to see the effect, but then it worked fine. I wanted to click the
button then drag the timeline.
I've found the performance of View to be good, but dependent on the size of
the face you're refreshing. For example, I did a little bouncing
line/spirograph thing (drawing, in a loop, on a face that has no child
faces) and the performance is heavily dependent on the size of the face.
It's zippy on an 80x60 face and creeps at ~1024x768.
I'm running a P900 against W2K FWIW.
One question, do you pronounce xaos as "chaos" or more like "taos"?
--Gregg
[4/4] from: media:quazart at: 25-Oct-2001 13:59
----- Original Message -----
From: "Gregg Irwin" <[greggirwin--mindspring--com]>
To: <[rebol-list--rebol--com]>
Sent: Thursday, October 25, 2001 1:32 PM
Subject: [REBOL] Re: advanced view example... for Paul
> Very cool Max!
gee thanks,
> It took me a minute to figure out that I had to click and drag the in or
out
> *button* to see the effect, but then it worked fine. I wanted to click the
> button then drag the timeline.
yeah, I tried to point that out in my following reply but I know its not
completely obvious...
> One question, do you pronounce xaos as "chaos" or more like "taos"?
xaos - chaos
I would have liked xos more (cross OS ... i.e. multi-platform) but then the
pronounciation is even harder to get.
in time, xos might win out though... ;-)
-Maxim
funny how people mix-up speed with fast... speed is neither fast nor slow
Notes
- Quoted lines have been omitted from some messages.
View the message alone to see the lines that have been omitted