Textwriter like on Github

[StarWarsFan]

Hey friends!

Has anybody seen an example code of a textwriter such as it is appearing on https://github.com/signup?source=login

This reminds me so much of good old C64 times that I would like to play with that a little.

Thanks for your input.

[matalog]

Do you want something to enter text into an input field in that manner, as if it were being typed on a keyboard, or do you just want it to appear on your program screen moving like that?

[NicTheQuick]

I don't get what you mean. You only linked the main page of Github.

[matalog]

Something like this:

Code: Select all

 If OpenWindow(0, 0, 0, 200, 200, "2DDrawing Example", #PB_Window_SystemMenu | #PB_Window_ScreenCentered)
    If CreateImage(0, 200, 200) 

          StartDrawing(ImageOutput(0))
                Box(0, 0, 200, 200, RGB(255, 255, 255))
                DrawingMode(#PB_2DDrawing_Transparent)
                StopDrawing() 
                      ImageGadget(0, 0, 0, 200, 200, ImageID(0))
                      message.s ="Hello World!"
                                ot=0
      For i = 1 To 30
        For L=1 To Len(message)

          StartDrawing(ImageOutput(0))

                DrawingMode(#PB_2DDrawing_Transparent)
         ot=DrawText(ot,50,Mid(message,L,1) , RGB(Random(255), Random(255), Random(255)))
          Delay(300);
                StopDrawing() 
      ImageGadget(0, 0, 0, 200, 200, ImageID(0))
          Next
      Next i

    EndIf
    
    Repeat
      Event = WaitWindowEvent()
    Until Event = #PB_Event_CloseWindow
    
  EndIf

[StarWarsFan]

Do you want something to enter text into an input field in that manner, as if it were being typed on a keyboard, or do you just want it to appear on your program screen moving like that?

Just look! https://github.com/signup?source=login

You code looks A BIT like that, but the flashing cursor is the thing that makes is look like in the movies.

[PBJim]

Just look! https://github.com/signup?source=login You code looks A BIT like that, but the flashing cursor is the thing that makes is look like in the movies.

Hi StarWarsFan, I also very much appreciate the style of input that you link to. It's a lot easier for me to read than modern Windows GUI inputs with squashed-up and low-contrast text. The closest I've seen in PureBasic, is HeX0R's terminal here, which might be reduced down to a single input line, if HeX0R wouldn't mind.

https://www.purebasic.fr/english/viewto ... al#p479795

It has a background image, but I was able to remove that just now, by commenting-out line 950. The other aspect is that the vertical cursor in the Github example provides a more striking visual effect and I was able to achieve that by commenting-out line 322 and then replacing line 325 with the below. Best, Jim.

Code: Select all

Line(x, y, 1, 20, *G\FrontColor)

[matalog]

This is a little better with flashing cursor.

If you want to implement this, it shows you how at least.

Code: Select all

OpenWindow(0, 0, 0, 400, 200, "Typing Text Example", #PB_Window_SystemMenu | #PB_Window_ScreenCentered)

AddWindowTimer(0,1,240)
AddWindowTimer(0,2,50)
CreateImage(0, 400, 200) 

StartDrawing(ImageOutput(0))
Box(0, 0, 400, 200, RGB(255, 255, 255))
DrawingMode(#PB_2DDrawing_Transparent)
StopDrawing() 
ImageGadget(0, 0, 0, 400, 200, ImageID(0))
Global   message.s ="Letters being typed to screen with a cursor following."
Global  ot=0
Global L=0 
Global col=0
Global ot=0
Procedure type()          
  L=L+1
  StartDrawing(ImageOutput(0))
  DrawingMode(#PB_2DDrawing_Transparent)
  Line(ot,52,1,12,#White)
  ot=DrawText(ot,50,Mid(message,L,1) , RGB(Random(255), Random(255), Random(255)))
  StopDrawing() 
  ImageGadget(0, 0, 0, 200, 200, ImageID(0))
EndProcedure 


Procedure flipcursor()
  If L & 1
    col = #White
  Else
    col = #Black
  EndIf
  StartDrawing(ImageOutput(0))
  Line(ot,52,1,12,col)
  StopDrawing() 
  ImageGadget(0, 0, 0, 200, 200, ImageID(0))
EndProcedure


Repeat
  Repeat
    Event = WaitWindowEvent()
    If Event = #PB_Event_Timer And EventTimer() = 1
      type()
    EndIf
    If Event = #PB_Event_Timer And EventTimer() = 2
      flipcursor()
    EndIf
  Until L=Len(message) Or  #PB_Event_CloseWindow
Until Event = #PB_Event_CloseWindow

[matalog]

One more version:

Code: Select all

OpenWindow(0, 0, 0, 400, 200, "Typing Text Example", #PB_Window_SystemMenu | #PB_Window_ScreenCentered)
InitSprite()
InitKeyboard()
OpenWindowedScreen(WindowID(0),0,0,400,200)
AddWindowTimer(0,2,50)
CreateImage(0, 400, 200) 

StartDrawing(ScreenOutput())
Box(0, 0, 400, 200, RGB(218, 155, 125))
DrawingMode(#PB_2DDrawing_Transparent)
StopDrawing() 
FlipBuffers()
StartDrawing(ScreenOutput())
Box(0, 0, 400, 200, RGB(218, 155, 125))
DrawingMode(#PB_2DDrawing_Transparent)
StopDrawing() 

Global   message.s ="Letters being typed to screen with a cursor following."
Global  ot=0
Global L=0 
Global col=0
Global ot=0,box=0,sw=1
Global now=ElapsedMilliseconds()
Procedure type()          

  If ElapsedMilliseconds() > now+70
    L=L+1
       now= ElapsedMilliseconds()
    EndIf
  ot=0
  StartDrawing(ScreenOutput())
    Box(0, 0, 400, 200, RGB(218, 155, 125))
  DrawingMode(#PB_2DDrawing_Transparent)
  Line(ot,52,1,12,RGB(218, 155, 125))
  For f=1 To L
    ot=DrawText(ot,50,Mid(message,f,1) ,RGB(0,0,255))
    Next
    StopDrawing() 


If L>=Len(message) And sw=1
  box=1
  sw=0
EndIf

EndProcedure 


Procedure flipcursor()
  If L & 1
    col =RGB(218, 155, 125)
  Else
    col = #Black
  EndIf
  StartDrawing(ScreenOutput())
  Line(ot,52,1,12,col)
  StopDrawing() 
  
EndProcedure


Repeat
  ExamineKeyboard()
  Repeat
    Event = WaitWindowEvent()
If box<1
    If Event = #PB_Event_Timer And EventTimer() = 2
      type()
      flipcursor()
      FlipBuffers()
    EndIf
  EndIf
  
      If box=1
     ;   Debug box
        StringGadget(0, 8,  70, 306, 20, "")
        SetActiveGadget(0)
      box=2
      ; Debug box
          EndIf
  Until L=Len(message) Or  #PB_Event_CloseWindow Or KeyboardPushed(#PB_Key_Escape)
Until Event = #PB_Event_CloseWindow Or KeyboardPushed(#PB_Key_Escape)

[Piero]

https://www.youtube.com/watch?v=04vhD6tNnj8

[StarWarsFan]

@matalog:
I tried out your first version. That post you can delete, your second version is much better with the flashing cursor that you added. Thanks!

@Piero:
That sound is awesome! Thanks!

@PBJim:
HeX0R's terminal looks very much like it. Thanks!

@all above
Thank you fellows, much to play with for the weekend
I am thinking of an underscore cursor and then adding sound, too.