• Dear Cerberus X User!

    As we prepare to transition the forum ownership from Mike to Phil (TripleHead GmbH), we need your explicit consent to transfer your user data in accordance with our amended Terms and Rules in order to be compliant with data protection laws.

    Important: If you accept the amended Terms and Rules, you agree to the transfer of your user data to the future forum owner!

    Please read the new Terms and Rules below, check the box to agree, and click "Accept" to continue enjoying your Cerberus X Forum experience. The deadline for consent is April 5, 2024.

    Do not accept the amended Terms and Rules if you do not wish your personal data to be transferred to the future forum owner!

    Accepting ensures:

    - Continued access to your account with a short break for the actual transfer.

    - Retention of your data under the same terms.

    Without consent:

    - You don't have further access to your forum user account.

    - Your account and personal data will be deleted after April 5, 2024.

    - Public posts remain, but usernames indicating real identity will be anonymized. If you disagree with a fictitious name you have the option to contact us so we can find a name that is acceptable to you.

    We hope to keep you in our community and see you on the forum soon!

    All the best

    Your Cerberus X Team

Snippet Example of HTML5 target in Mojo2

Wingnut

Well-known member
3rd Party Module Dev
Tutorial Author
Joined
Jan 2, 2020
Messages
1,414
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:
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

  • Screenshot 2020-10-21 at 02.42.24.png
    Screenshot 2020-10-21 at 02.42.24.png
    106.6 KB · Views: 115
Last edited:
Back
Top Bottom