[DBP] Energy meter with glossy gradients

Author

Message

Phaelax

DBPro Master

22

Years of Service

User Offline

Joined: 16th Apr 2003

Location: Metropia

Posted: 22nd Nov 2009 14:41 Edited at: 23rd Nov 2009 22:54

Link

REM ********************************
REM * Title: Gradient Energy Meter *
REM * Author: Phaelax              *
REM * Date: Nov 22, 2009           *
REM ********************************

sync on
sync rate 60

power# = 0.73

do
   cls
   
   if mouseclick() = 1 then inc power#, 0.02
   if mouseclick() = 2 then dec power#, 0.02
   if power# > 1 then power# = 1.0
   if power# < 0 then power# = 0.0
   
   
   healthBar(mousex(), mousey(), 300, 50, power#)
   
   sync
loop

rem x,y is the upper left corner of meter
rem P# ranges from 0 to 1
function healthBar(x, y, width, height, P#)
   rem gradient bar
   seg = width / 3
   box x, y, x+seg, y+height, rgb(0,255,0),rgb(0,255,0),rgb(255,255,0),rgb(255,255,0)
   box x+seg, y, x+seg+seg, y+height, rgb(255,255,0),rgb(255,255,0),rgb(255,128,0),rgb(255,128,0)
   box x+seg+seg, y, x+width, y+height, rgb(255,128,0),rgb(255,128,0),rgb(255,0,0),rgb(255,0,0)
   
   rem empty bit
   ink rgb(92,92,92),0
   box x+width*P#, y, x+width, y+height
   
   rem highlight
   c1 = 0xCCFFFFFF
   c2 = 0x33FFFFFF   
   box x, y, x+width, y+height*0.5, c2,c1,c2,c1
endfunction

+ Code Snippet

REM ********************************
REM * Title: Gradient Energy Meter *
REM * Author: Phaelax              *
REM * Date: Nov 22, 2009           *
REM ********************************

sync on
sync rate 60

power# = 0.73

do
   cls
   
   if mouseclick() = 1 then inc power#, 0.02
   if mouseclick() = 2 then dec power#, 0.02
   if power# > 1 then power# = 1.0
   if power# < 0 then power# = 0.0
   
   
   healthBar(mousex(), mousey(), 300, 50, power#)
   
   sync
loop

rem x,y is the upper left corner of meter
rem P# ranges from 0 to 1
function healthBar(x, y, width, height, P#)
   rem gradient bar
   seg = width / 3
   box x, y, x+seg, y+height, rgb(0,255,0),rgb(0,255,0),rgb(255,255,0),rgb(255,255,0)
   box x+seg, y, x+seg+seg, y+height, rgb(255,255,0),rgb(255,255,0),rgb(255,128,0),rgb(255,128,0)
   box x+seg+seg, y, x+width, y+height, rgb(255,128,0),rgb(255,128,0),rgb(255,0,0),rgb(255,0,0)
   
   rem empty bit
   ink rgb(92,92,92),0
   box x+width*P#, y, x+width, y+height
   
   rem highlight
   c1 = 0xCCFFFFFF
   c2 = 0x33FFFFFF   
   box x, y, x+width, y+height*0.5, c2,c1,c2,c1
endfunction

As the entire gradient is drawn first and then a gray box is overlayed on top to show only a percentage of the meter, the code could be optimized to not draw the gradient boxes (3 separate boxes are drawn) which are completely hidden by the gray box.

> SELECT * FROM users WHERE clue > 0
> 0 rows returned

Attachments

Login to view attachments

Back to top

Profile PM Email Website

Phaelax

DBPro Master

22

Years of Service

User Offline

Joined: 16th Apr 2003

Location: Metropia

Posted: 22nd Nov 2009 15:59 Edited at: 23rd Nov 2009 22:54

Link

And just for fun, here's a demo using a slightly modified version of the function.

REM ********************************
REM * Title: Energy Meter Demo     *
REM * Author: Phaelax              *
REM * Date: Nov 22, 2009           *
REM ********************************

sync on
sync rate 60

Type Bar
   targetValue as float
   currentValue as float
EndType

barCount = 16
dim bars(barCount) as Bar

for i = 1 to barCount
   bars(i).targetValue = rnd(100)/100.0   
   bars(i).currentValue = bars(i).targetValue
next i
      
width = 12
height = 100

timestamp = timer()

do
   cls

MX = mousex()
   MY = mousey()

for i = 0 to barCount-1
      healthBar(MX+i*13, MY, width, height, bars(i+1).currentValue)
      
      if bars(i+1).currentValue <= bars(i+1).targetValue
         bars(i+1).currentValue = bars(i+1).currentValue + 0.025
         if bars(i+1).currentValue > bars(i+1).targetValue 
            bars(i+1).currentValue = bars(i+1).targetValue
            bars(i+1).targetValue = rnd(100)/100.0

endif
      else
         if bars(i+1).currentValue > bars(i+1).targetValue
           bars(i+1).currentValue = bars(i+1).currentValue - 0.025
           if bars(i+1).currentValue < bars(i+1).targetValue 
              bars(i+1).currentValue = bars(i+1).targetValue
              bars(i+1).targetValue = rnd(100)/100.0              
           endif
         endif
      endif
   next i   
   
   set cursor 0,0
   print bars(1).targetValue
   print bars(1).currentValue
  
   sync
loop

function healthBar(x, y, width, height, P#)
   rem gradient bar
   seg = height / 3
   
   box x, y-seg, x+width, y, rgb(0,255,0),rgb(255,255,0),rgb(0,255,0),rgb(255,255,0)
   box x, y-seg-seg, x+width, y-seg, rgb(255,255,0),rgb(255,128,0),rgb(255,255,0),rgb(255,128,0)
   box x, y-height, x+width, y-seg-seg, rgb(255,128,0),rgb(255,0,0),rgb(255,128,0),rgb(255,0,0)
  
   rem bar's horizontal lines
   C = 0x33000000
   r = height / 5
   for i = 1 to r
      yy = y - i*5
      box x, yy, x+width, yy+1, C,C,C,C      
   next i
   
   rem empty bit
   ink rgb(48,48,48),0
   `ink 0,0
   box x, y-height, x+width+1, y-height*P#
   
   rem highlight
   c1 = 0xBBFFFFFF
   c2 = 0x00FFFFFF   
   box x, y-height*p#, x+width*0.6, y, c1,c1,c2,c2
endfunction

+ Code Snippet

REM ********************************
REM * Title: Energy Meter Demo     *
REM * Author: Phaelax              *
REM * Date: Nov 22, 2009           *
REM ********************************

sync on
sync rate 60

Type Bar
   targetValue as float
   currentValue as float
EndType

barCount = 16
dim bars(barCount) as Bar

for i = 1 to barCount
   bars(i).targetValue = rnd(100)/100.0   
   bars(i).currentValue = bars(i).targetValue
next i
      
width = 12
height = 100

timestamp = timer()

do
   cls

   MX = mousex()
   MY = mousey()

   for i = 0 to barCount-1
      healthBar(MX+i*13, MY, width, height, bars(i+1).currentValue)
      
      if bars(i+1).currentValue <= bars(i+1).targetValue
         bars(i+1).currentValue = bars(i+1).currentValue + 0.025
         if bars(i+1).currentValue > bars(i+1).targetValue 
            bars(i+1).currentValue = bars(i+1).targetValue
            bars(i+1).targetValue = rnd(100)/100.0

         endif
      else
         if bars(i+1).currentValue > bars(i+1).targetValue
           bars(i+1).currentValue = bars(i+1).currentValue - 0.025
           if bars(i+1).currentValue < bars(i+1).targetValue 
              bars(i+1).currentValue = bars(i+1).targetValue
              bars(i+1).targetValue = rnd(100)/100.0              
           endif
         endif
      endif
   next i   
   
   set cursor 0,0
   print bars(1).targetValue
   print bars(1).currentValue
  
   sync
loop


function healthBar(x, y, width, height, P#)
   rem gradient bar
   seg = height / 3
   
   box x, y-seg, x+width, y, rgb(0,255,0),rgb(255,255,0),rgb(0,255,0),rgb(255,255,0)
   box x, y-seg-seg, x+width, y-seg, rgb(255,255,0),rgb(255,128,0),rgb(255,255,0),rgb(255,128,0)
   box x, y-height, x+width, y-seg-seg, rgb(255,128,0),rgb(255,0,0),rgb(255,128,0),rgb(255,0,0)
  
   rem bar's horizontal lines
   C = 0x33000000
   r = height / 5
   for i = 1 to r
      yy = y - i*5
      box x, yy, x+width, yy+1, C,C,C,C      
   next i
   
   rem empty bit
   ink rgb(48,48,48),0
   `ink 0,0
   box x, y-height, x+width+1, y-height*P#
   
   rem highlight
   c1 = 0xBBFFFFFF
   c2 = 0x00FFFFFF   
   box x, y-height*p#, x+width*0.6, y, c1,c1,c2,c2
endfunction

> SELECT * FROM users WHERE clue > 0
> 0 rows returned

Attachments

Login to view attachments

Back to top

Profile PM Email Website

HowDo

22

Years of Service

User Offline

Joined: 28th Nov 2002

Location: United Kingdom

Posted: 22nd Nov 2009 16:37

Link

Looking good, like how you get the shine on the bars, and getting the vertical bars going which I think are a bit more work in coding look great, hope someone changes title and adds DBP to it.

Amazing how a simple bit of code changes when user get to changing it.

Dark Physics makes any hot drink go cold.

Back to top

Profile PM

Phaelax

DBPro Master

22

Years of Service

User Offline

Joined: 16th Apr 2003

Location: Metropia

Posted: 22nd Nov 2009 20:09

Link

doh

I always forget to put a DBP tag in the title. It should work in DBC if the glossy overlay is removed since classic won't support the alpha.

> SELECT * FROM users WHERE clue > 0
> 0 rows returned

Back to top

Profile PM Email Website

baxslash

Valued Member

Bronze Codemaster

18

Years of Service

User Offline

Joined: 26th Dec 2006

Location: Duffield

Posted: 29th Nov 2009 00:07 Edited at: 29th Nov 2009 00:12

Link

Already using this code for my new WIP health bars (from the code you posted in HowDo's post on wind speed)... thanks Phaelax!!

EDIT: I reversed the colours for a health bar though!

+ Code Snippet

function healthBar(x, y, width, height, P#)
    P# = P#/100
    if P#<0.0 then P#=0.0
   rem gradient bar
   seg = width / 3
   box x, y, x+seg, y+height, rgb(255,0,0),rgb(255,0,0),rgb(255,128,0),rgb(255,128,0)
   box x+seg, y, x+seg+seg, y+height, rgb(255,128,0),rgb(255,128,0),rgb(255,255,0),rgb(255,255,0)
   box x+seg+seg, y, x+width, y+height, rgb(255,255,0),rgb(255,255,0),rgb(0,255,0),rgb(0,255,0)

   rem empty bit
   ink rgb(92,92,92),0
   box x+width*P#, y, x+width, y+height

   rem highlight
   c1 = 0xCCFFFFFF
   c2 = 0x33FFFFFF
   box x, y, x+width, y+height*0.5, c2,c1,c2,c1
endfunction

Back to top

Profile PM Email

Sorry your browser is not supported!

Code Snippets / [DBP] Energy meter with glossy gradients

Attachments

Attachments