Example of HTML5 target in Mojo2

Jimmy

Active Member
Tutorial Author
Joined
Jan 2, 2020
Here's a simple example how to use Mojo2 and raw HTML to do something in HTML5 target.

Screenshot 2020-10-21 at 02.37.00.png



Screenshot 2020-10-21 at 02.42.24.png


Cerberus X:
Import mojo2
#MOJO_AUTO_SUSPEND_ENABLED=False
#HTML5_CANVAS_WIDTH=1440 ' Set your wanted window-size here
#HTML5_CANVAS_HEIGHT=900

#If TARGET="html5"
    Extern
    Function ReloadApp:Void() = "location.reload" ' How to insert HTML code directly inline without external files and get it ignored by other platforms
    Public
#Else
    Function ReloadApp:Void()
    End
#End

Function Main()
    New MyApp    
End

Class MyApp Extends App

    Field x:Float
    Field y:Float
    Field i:Image
    Field canvas:Canvas

    Method OnCreate()
    
        canvas = New Canvas
        
        ' Vertical blanking
        SetSwapInterval 1 ; SetUpdateRate 0    
            
        Seed = Millisecs()
        y = Rnd(100)
        x = -540
        Print "Starting"
    End

    Method OnUpdate()
        If TouchHit()
            If MouseX() > 200 And MouseX() < 294 And MouseY() > 200 And MouseY() < 243
                ReloadApp()
            Endif
        Endif
     End

    Method OnRender()
        canvas.Clear 0,0,0    
    
        canvas.SetColor 0,1,Rnd(1)
        canvas.DrawLine 1440/2,0,x+400,y+10
        canvas.DrawLine 1440/2,0+Rnd(10),x+400,y+50+210+Rnd(4)
        canvas.DrawLine 1440/2,0+Rnd(2),x+402,y+40+50+Rnd(20)
        canvas.DrawLine 1440/2,0+Rnd(2),x+402,y+40+150+Rnd(10)
        
        canvas.SetColor 1,1,1
        canvas.DrawOval x+350++Sin(x)*10,y+(12*5)+Cos(x)*10,10,10
        canvas.DrawOval x+200+Cos(x)*10,y+(12*6)+Sin(x)*10,10,10
        
        x = x + 1
        y = 100 + Sin(x*2) * 100 ' Use Sin if you want to use degrees, use Sinr if you want to use radians wo converting anything
        canvas.SetColor 1,1,0

        canvas.DrawText "                          oooo$$$$$$$$$$$$oooo",x,y
        canvas.DrawText"                      oo$$$$$$$$$$$$$$$$$$$$$$$$o",x,y+(12*1)
        canvas.DrawText"                   oo$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$o         o$   $$ o$",x,y+(12*2)
        canvas.DrawText"   o $ oo        o$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$o       $$ $$ $$o$",x,y+(12*3)
        canvas.DrawText"oo $ $ '$      o$$$$$$$$$    $$$$$$$$$$$$$    $$$$$$$$$o       $$$o$$o$",x,y+(12*4)
        canvas.DrawText"$$$$$$o$     o$$$$$$$$$      $$$$$$$$$$$      $$$$$$$$$$o    $$$$$$$$",x,y+(12*5)
        canvas.DrawText"  $$$$$$$    $$$$$$$$$$$      $$$$$$$$$$$      $$$$$$$$$$$$$$$$$$$$$$$",x,y+(12*6)
        
        canvas.DrawText"  $$$$$$$$$$$$$$$$$$$$$$$    $$$$$$$$$$$$$    $$$$$$$$$$$$$$  '$$$$$$",x,y+(12*7)
        canvas.DrawText"   '$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$    ''$$$",x,y+(12*8)
        canvas.DrawText"    $$$   o$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$     ''$$$o",x,y+(12*9)
        canvas.DrawText"   o$$''   $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$       $$$o",x,y+(12*10)
        
        canvas.DrawText"   $$$    $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$'' ''$$$$$$ooooo$$$$o",x,y+(12*11)
        canvas.DrawText"  o$$$oooo$$$$$  $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$   o$$$$$$$$$$$$$$$$$",x,y+(12*12)
        canvas.DrawText"  $$$$$$$$''$$$$   $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$     $$$$",x,y+(12*13)
        canvas.DrawText"'  ''''''       $$$$   '''$$$$$$$$$$$$$$$$$$$$$$$$$$$$'''''      o$$",x,y+(12*14)
        canvas.DrawText"            ''$$$o     ''''$$$$$$$$$$$$$$$$$$$$$''        $$$",x,y+(12*15)
        canvas.DrawText"              $$$o           $$$''''''$$$$$$'''''''          o$$$",x,y+(12*16)
        canvas.DrawText"               $$$$o                 oo             o$$$''",x,y+(12*17)
        canvas.DrawText"                '''$$$o      o$$$$$''''$$$$o        o$$$$",x,y+(12*18)
        canvas.DrawText"                  '''''$$$$$oo     ''''$$$o$$$$$o   o$$$$",x,y+(12*19)
        canvas.DrawText"                     '''''$$$$$oooo  '''$$$o$$$$$$$$$",x,y+(12*20)
        canvas.DrawText"                        '''$$$$$$oo $$$$$$$$$$",x,y+(12*21)
        canvas.DrawText"                               ''''''''$$$$$$$$$$$",x,y+(12*22)
        canvas.DrawText"                                    $$$$$$$$$$$$",x,y+(12*23)
        canvas.DrawText"                                     $$$$$$$$$$",x,y+(12*24)
        canvas.DrawText"                                      '''$$$$$$$",x,y+(12*25)                                                 

        canvas.SetColor 1,0,0
   
        canvas.DrawText"                                     oo                  ",x,y+(12*17)
        canvas.DrawText"                                    '$$$$o             ",x,y+(12*18)
        canvas.DrawText"                                    $$$o$$$$$o        ",x,y+(12*19)
        canvas.DrawText"                                    '''$$$o$$$$     ",x,y+(12*20)
        canvas.DrawText"                                    $$$$$$$$$$",x,y+(12*21)
        canvas.DrawText"                                     ''$$$$$$$$$$$",x,y+(12*22)
        canvas.DrawText"                                    $$$$$$$$$$$$",x,y+(12*23)
        canvas.DrawText"                                     $$$$$$$$$$",x,y+(12*24)
        canvas.DrawText"                                      '''$$$$$$$",x,y+(12*25)

        canvas.SetColor 0.8,0,0
        canvas.DrawRect 200,200,94,43
        canvas.SetColor 0.8,0.8,0.8
        canvas.DrawText "Reload",220,215

        canvas.Flush
    End

    Method OnSuspend()
        Print "OnSuspend"
    End

    Method OnResume()
        Print "OnResume"
    End

End
 

Attachments

Last edited:
Top Bottom