[SB 2.00] Canvas Gadget & Gyroscope

Share your advanced knowledge/code with the community.
falsam
Posts: 280
Joined: Mon May 05, 2014 9:49 pm
Location: France
Contact:

[SB 2.00] Canvas Gadget & Gyroscope

Post by falsam »

[SB 2.00 - Android App]

With this code, I create a CanvasGadget Fullscreen. I add some colored squares that will move.

Orient your device to track movements.
Window Debug is open because this is a beta.

Code: Select all

;Spider Basic 2.00 Beta 4

Declare CanvasEvent()

ExamineDesktops()

Structure newSquare
  x.i
  y.i
  mass.f
  color.i
EndStructure
Global NewList Squares.NewSquare()

Global width = DesktopWidth(0)
Global height = DesktopHeight(0)
Global x = width/2
Global y = height/2

;Add squares
For n = 0 To 40
  AddElement(Squares())
  With Squares()
    \x = Random(width - 60, 20)
    \y = Random(height - 60, 20)
    \mass = Random(10, 3)/10
    \color = RGB(Random(255), Random(255), Random(255))
  EndWith
Next

OpenWindow(0, 0, 0, 0, 0, "", #PB_Window_Background)

LoadFont(0, "Arial", 30)

CanvasGadget(0, 0, 0, width, height)


!function motion(event) {
!  var v_ax = event.accelerationIncludingGravity.x
!  var v_ay = event.accelerationIncludingGravity.y
!  var v_az = event.accelerationIncludingGravity.z

  If StartDrawing(CanvasOutput(0)) 
  
    ;Draw Background
    Box(0, 0, width, height, RGB(184, 134, 11))
    Box(20, 20, width-40, height-40, RGB(205, 133, 63))
  
    ;Draw Title
    DrawingMode(#PB_2DDrawing_Transparent)
    DrawingFont(FontID(0))
    DrawText(50, 50, "SpiderBasic 2.00 Beta", RGB(255, 255, 255))
  
    ;Draw Squares
    ForEach Squares()
      With Squares()
      
        If \x - ax + \mass > 20 And \x - ax + \mass < width - 60 And Int(ax) <> 0
          \x - ax + \mass
        EndIf
      
        If \y + ay + \mass > 20 And \y +ay + \mass < height - 60 And Int(ay) <> 0
         \y + ay + \mass
        EndIf
      
        DrawingMode(#PB_2DDrawing_Default)
        Box(\x, \y, 40, 40, \color)
        DrawingMode(#PB_2DDrawing_Outlined)
        Box(\x, \y, 40, 40, RGB(0, 0, 0))
      EndWith
    Next
    StopDrawing()
  EndIf 
!}

;// Prolog
!function go() {

;// No Zoom
! var meta = document.createElement('meta');
! meta.name = "viewport";
! meta.content = "width=device-width, user-scalable=no";
! document.getElementsByTagName('head')[0].appendChild(meta);

;// Add devicemotion event
!	if(window.DeviceMotionEvent){
!		window.addEventListener("devicemotion", motion, false);
!	}

!}

!go()
Setup Android App

Image

Download Apk test (Android ARM Socket only)
http://falsam.com/download/data/canvastest.apk

➽ Windows 11 - JDK 1.8 - SB 2.40 - Android 13
http://falsam.com

Sorry for my poor english
Fred
Site Admin
Posts: 1510
Joined: Mon Feb 24, 2014 10:51 am

Re: [SB 2.00] Canvas Gadget & Gyroscope

Post by Fred »

Very nice example, works perfectly :)
Post Reply