APNG ~ PNG Image File format

[charvista]

.PNG Image File format is supported in PureBasic. Transparency works great.
How about the animated PNG images? PureBasic does not support .GIF files (only through a workaround with WebGadget()).
I tried to add an animated PNG file in my program, but is not animated. Is this not supported (yet)?
For an example, you can download the bouncing ball at http://en.wikipedia.org/wiki/APNG.

[charvista]

No reaction yet... so I must believe that animated PNG images are not yet supported in 2010... Only the first image of the internal chain is displayed (that's a good begin ).
I hope that tomorrow there will be more movements from these images

[Rook Zimbabwe]

However because libpng is the PNG Group's reference implementation of the official specification, APNG support can never be supported in the main libpng distribution so long as it remains unratified by the Group (The PNG Group). Consequently, Iceweasel 3 does not support APNG nor do many other mainstream browsers.

Kind of useless though...

[charvista]

A pity...
Thank you Rook Zimbabwe. Then let's pray that a solution will come soon....
I was willing to use APNG because it is transparent, so I could create a (slightly) flashing frame around an important item in my program.
For now I need to keep it "motionless"... *sigh*
Cheers

[Rook Zimbabwe]

Is it something you could change the color of perhaps...

then you could write a small procedure to cycle color on and off 3-5 times... You may be able to do that in PureColor as well...

[charvista]

Yes perhaps, indeed...
I have also thought about this possibility...
I only hope it will run fast enough and not slowing down the system (here I am optimist, because I know that plotting pixels is very fast in PB).
But I am not yet very sure how to do that... my background is blue ($800000) and the frame white ($FFFFFF).
Maybe with a thread?
And while I'm talking about this (making a loop of lines or dots), it would be very interesting to write a procedure that draws different kinds of frames with -for example- moving small lines around the item... like when you select a region on a picture in an image editor...
Should not be too complicated, I think...

[charvista]

My first attempt......
Problem is that sometimes the whole image gadget flashes white.......

Code: Select all

Global Font=LoadFont(#PB_Any,"Verdana",10,#PB_Font_Bold)
Procedure zFlashingFrame(Image.i,Color.i)
    StartDrawing(ImageOutput(Image))
    DrawingMode(#PB_2DDrawing_Transparent)

        Line(100,100,300,1,Color)
        Line(100,100,1,60,Color)
        Line(400,100,1,60,Color)
        Line(100,160,300,1,Color)

    StopDrawing()
    ImGad=ImageGadget(#PB_Any, 0, 0, 500, 400, ImageID(Image))
    SetGadgetState(ImGad,ImageID(Image))
EndProcedure

Win=OpenWindow(#PB_Any,100,100,500,400,"ABC")

Image=CreateImage(#PB_Any,500,400)
StartDrawing(ImageOutput(Image))
DrawingMode(#PB_2DDrawing_Transparent)
FillArea(0,0,-1,$800000)
DrawingFont(FontID(Font))
DrawText(150,120,"*** VERY IMPORTANT ***",$FF00FF)
StopDrawing()

For i=1 To 5
    zFlashingFrame(Image,$FFFFFF)
    Delay(500)
    zFlashingFrame(Image,$000000)
    Delay(500)
Next i

Repeat
    Event = WaitWindowEvent()
    Select Event
        Case #PB_Event_CloseWindow
            Quit = 1
    EndSelect
Until Quit = 1

End

[c4s]

What about using the same ImageGadget() instead of creating new ones each time? (Take a look at the Library Viewer with your code)

This works perfectly here:

Code: Select all

Global Font=LoadFont(#PB_Any,"Verdana",10,#PB_Font_Bold)
Procedure zFlashingFrame(Image.i,Color.i)
    StartDrawing(ImageOutput(Image))
    DrawingMode(#PB_2DDrawing_Transparent)

        Line(100,100,300,1,Color)
        Line(100,100,1,60,Color)
        Line(400,100,1,60,Color)
        Line(100,160,300,1,Color)

    StopDrawing()

    SetGadgetState(123,ImageID(Image))
EndProcedure

Win=OpenWindow(#PB_Any,100,100,500,400,"ABC")
    ImageGadget(123, 0, 0, 500, 400, 0)

Image=CreateImage(#PB_Any,500,400)
StartDrawing(ImageOutput(Image))
DrawingMode(#PB_2DDrawing_Transparent)
FillArea(0,0,-1,$800000)
DrawingFont(FontID(Font))
DrawText(150,120,"*** VERY IMPORTANT ***",$FF00FF)
StopDrawing()

For i=1 To 5
    zFlashingFrame(Image,$FFFFFF)
    Delay(500)
    zFlashingFrame(Image,$000000)
    Delay(500)
Next i

Repeat
    Event = WaitWindowEvent()
    Select Event
        Case #PB_Event_CloseWindow
            Quit = 1
    EndSelect
Until Quit = 1

End

Also the flashing should be in the event loop using a timer...

[charvista]

You are correct c4s. One ImageGadget() is sufficient!
And yes, the loop is now inside the procedure.
And now it works also as a thread, so you can continue working on the program while the frame is flashing "forever" (until the thread is deleted).
It was necessary to create the variables as global as we cannot enter parameters in a thread.

Code: Select all

;author: charvista 2011-01-01 (Happy New Year!)
;example of a flashing (blinking) frame in a thread.

Declare zFlashingFrame(*AA)

Global Font=LoadFont(#PB_Any,"Verdana",10,#PB_Font_Bold)

Global FrameThread_Color1=$FFFFFF
Global FrameThread_Color2=$000000
Global FrameThread_X=100
Global FrameThread_Y=100
Global FrameThread_W=300
Global FrameThread_H=60
Global FrameThread_Image=CreateImage(#PB_Any,500,300)

Win=OpenWindow(#PB_Any,100,100,500,400,"ABC")
SetWindowColor(Win,$800000)
StartDrawing(ImageOutput(FrameThread_Image))
DrawingMode(#PB_2DDrawing_Transparent)
FillArea(0,0,-1,$800000)
DrawingFont(FontID(Font))
DrawText(150,120,"*** VERY IMPORTANT ***",$FF00FF)
StopDrawing()
Btn=ButtonGadget(#PB_Any,300,320,100,30,"OK")
Global FrameThread_ImGad=ImageGadget(#PB_Any, 0, 0, 500, 300, ImageID(FrameThread_Image))
FrameThread=CreateThread(@zFlashingFrame(),AA)
Repeat
    Event = WaitWindowEvent()
    Select Event
        Case #PB_Event_CloseWindow
            Quit = 1
        Case #PB_Event_Gadget
            Select EventGadget()
                Case Btn
                    Quit=1
            EndSelect
    EndSelect
Until Quit = 1
KillThread(FrameThread)
End

Procedure zFlashingFrame(*AA)
    X = FrameThread_X
    Y = FrameThread_Y
    W = FrameThread_W
    H = FrameThread_H
    Repeat
        StartDrawing(ImageOutput(FrameThread_Image))
        DrawingMode(#PB_2DDrawing_Transparent)
        LineXY(X,Y,X+W,Y,FrameThread_Color1)
        LineXY(X,Y,X,Y+H,FrameThread_Color1)
        LineXY(X+W,Y,X+W,Y+H,FrameThread_Color1)
        LineXY(X,Y+H,X+W,Y+H,FrameThread_Color1)
        Delay(500)
        StopDrawing()
        SetGadgetState(FrameThread_ImGad,ImageID(FrameThread_Image))
        
        StartDrawing(ImageOutput(FrameThread_Image))
        DrawingMode(#PB_2DDrawing_Transparent)
        LineXY(X,Y,X+W,Y,FrameThread_Color2)
        LineXY(X,Y,X,Y+H,FrameThread_Color2)
        LineXY(X+W,Y,X+W,Y+H,FrameThread_Color2)
        LineXY(X,Y+H,X+W,Y+H,FrameThread_Color2)
        Delay(500)
        StopDrawing()
        SetGadgetState(FrameThread_ImGad,ImageID(FrameThread_Image))
    ForEver
EndProcedure

[KJ67]

as we cannot enter parameters in a thread.

Actually, threads gladly takes a integer as parameters. This could then be a pointer to anything.
Ex:

Code: Select all

Structure InterComm
  In.f
  Out.f
  cntStart.i
  cntTo.i
EndStructure

sem0 = CreateSemaphore()

Procedure tCounter(*p.InterComm)
  Shared sem0
  Protected i, cnt.f=*p\In
  For i=*p\cntStart To *p\cntTo
    cnt+1.5
  Next
  *p\Out=cnt
  SignalSemaphore(sem0)
EndProcedure

*buf.InterComm = AllocateMemory(SizeOf(InterComm))
If *buf
  *buf\In       =-20
  *buf\cntStart =  5
  *buf\cntTo    = 10
  CreateThread(@tCounter(),*buf)
  WaitSemaphore(sem0)
  Debug *buf\Out
  FreeMemory(*buf)
EndIf

[charvista]

Thanks KJ64. Interesting code. A bit complex to me for now, but I understand the principle.
I don't have enough expericence with Structures and none about Semaphores to use them now, but no doubt I will study this more deeply, as my knowledge is growing (slowly lol)...
Cheers

[Seymour Clufley]

This format is now supported by all modern browsers (with the exception of Microsoft Edge) and therefore available for 74% of web users. If we ever get UseGIFImageEncoder() and SaveAnimatedImage() commands for creating animated GIFs, it would be good to also have UseAPNGImageEncoder().

[IdeasVacuum]

+1

[davido]

+1

[walbus]

APNG should replace GIF once
But there was no acceptance
I don't think this is going to be much different in the future.

In the meantime MP4 GIF are more favoured because they achieve a much better compression.

I don't think there will be any APNG support in PB in the foreseeable future, or at all.

You can create sprite sheets with a GIF converter,
you can then save them
There are many programs to make sheets from images

With GFX_Wizzard_BF, as sample, you can animate these sheets and output them on canvas.
Also frames that move, blink, or whatever
http://www.purebasic.fr/english/viewtop ... 12&t=66927