SpiderBasic

- a basic to master the web -
https://forums.spiderbasic.com/

SpiderBasic 3.00 is out !

https://forums.spiderbasic.com/viewtopic.php?t=2521

Page 1 of 6

SpiderBasic 3.00 is out !

Posted: Wed May 15, 2024 7:11 am
by Fred
Hello everyone,

26-06-2024: Final is out, thanks a lot for testing and enjoy !

22-06-2024: Beta 5 is out, with the doc fully finished and some more stuff:

Code: Select all

- Added: Background color selector in CreateApp for Android.
- Updated: Doc with new Mobile library
15-06-2024: Beta 4 is out, should really fix the iOS app creation, and comes with some new features:

Code: Select all

- Added: 'DPI Aware' flag in 'Compiler Options' to have DPI aware applications
- Added: --rebuildappdir commandline option to easily rebuild an app (created with --keepappdir)
- Added: SpiderBasicCLI.cmd to have an easy to use commandline (Windows)
07-06-2024: Beta 3 is out, it should fix the iOS app creation and bring some more new stuff:

Code: Select all

- Added: AddTimer() and RemoveTimer() to have window independant timers.
- Added: SplashScreenControl() to handle when closing the splashscreen.
- Changed: the compile app window has now an editor gadget instead of a listview, allowing for select/pasting output to ease debugging app creation errors
01-06-2024: Beta 2 is out, with the usual bug fixes. Don't hesitate to test it !

30-05-2024: Time to raise the major version to 3.00 as we successfully added a built-in WebView in the IDE and an integrated debugger ! All the libraries have now a debug runtime check and if an error is detected, the correct line/file in the IDE will be highlighted, like in PureBasic. The debugger is still very scarce (no dynamic breakpoint, stop/step/continue) but it is actually working and should ease a lot the development.

the WebView is a tool, so you can either embed it in the right panel or in a separate window. If the WebView tool isn't activated (removed from the panel and not displayed), then the default browser is used as usual. The Debug output window is now also handled by the IDE when the WebView is used. SaveDebugOutput() and CopyDebugOutput() commands have been added.

Here is a screenshot in action:

Image

The next major version of SpiderBasic is coming and brings a brand new library to easy create mobile UI, with both Android and iOS native look ! As the lib is big, this is a still a work in progress to get your feedback and see what should be added/modified to get good mobile UI support. We use a patched version of OnsenUI 2 to power this (https://onsen.io/)

The idea behind the layout is to have some container (Page, Navigator, TabBar) and then you can add a toolbar, some rows and/or a list. Each row or list item can contain up to 3 objects (on left, center and right). While testing this, resize your navigator to have a mobile look for better experience. Here is the complete commandlist:

Code: Select all

FreeMobile, Long (#Mobile) - Frees the mobile object.
IsMobile, Long (#Mobile) - Tests if the given mobile object is initialized.
DisableMobile, Long, Long (#Mobile, State) - Disable or enable the given mobile object.
AlertMobile, String (Text$) - Display an alert.
ContainerMobile, Long, Long, [String], [String], (#Mobile, Type [, Style$ [, Identifier$]]) - Create a new mobile container.
CheckBoxMobile, Long, String, [Long], (#Mobile, Text$ [, Flags]) - Create a new mobile checkbox in the current container.
OptionMobile, Long, String, String, [Long], (#Mobile, Text$, Group$ [, Flags]) - Create a new mobile option in the current container.
ButtonMobile, Long, String, [Long], (#Mobile, Text$ [, Flags]) - Create a new mobile button in the current container.
TextMobile, Long, String, [Long], (#Mobile, Text$ [, Flags]) - Create a new mobile text in the current container.
SwitchMobile, Long, [Long], (#Mobile [, Flags]) - Create a new mobile switch in the current container.
InputMobile, Long, String, [String], [Long], (#Mobile, Text$ [, PlaceHolder$ [, Flags]]) - Create a new  mobile input in the current container.
TrackBarMobile, Long, Long, Long, Long, [Long], (#Mobile, Minimun, Maximum, Step [, Flags]) - Create a new mobile trackbar in the current container.
ProgressBarMobile, Long, [Long], (#Mobile [, Flags]) - Create a new mobile progressbar in the current container.
IconMobile, Long, String, [Long], (#Mobile, Name$ [, Flags]) - Create a new mobile icon in the current container.
ToolBarMobile, Long (#Mobile) - Create a new mobile toolbar in the current container.
CloseMobileContainer () - Close the current mobile container.
HtmlMobile, String (Text$) - Append raw HTML in the current container.
ImageMobile, Long, Long, [Long], (#Mobile, ImageID, [, Flags]) - Create a new mobile image in the current container.
GetMobileText, Long (#Mobile) - Return the mobile text.
SetMobileText, Long, String (#Mobile, Text$) - Change the mobile text.
GetMobileAttribute, Long, String, [Long], (#Mobile, Attribute$ [, Item]) - Return the mobile attribute.
SetMobileAttribute, Long, String, String, [Long], (#Mobile, Attribute$, Value$ [, Item]) - Change the mobile attribute.
ListMobile, Long, [Long], (#Mobile [, Flags]) - Create a new mobile list in the current container.
AddListMobileItem, Long, String, [Long], (#Mobile, Text$ [, Flags]) - Add a new item to a mobile list.
TabBarMobile, Long, [Long], (#Mobile [, Flags]) - Create a new  mobile tab bar in the current container.
AddTabBarMobileItem, Long, String, String, String, String, [Long], (#Mobile, Text$, Icon$, ActiveIcon$, Page$ [, NbBadges]) - Add a new tab to a mobile tab bar.
NavigatorMobile, Long, String, [Long], (#Mobile, Page$ [, Flags]) - Create a new mobile navigator in the current container.
ChangeNavigatorMobilePage, Long, Long, [String], (#Mobile, Action [, Page$]) - Changet the mobile navigator page.
SplitterMobile, Long, String, String, [Long], (#Mobile, MenuPage$, ContentPage$ [, Flags]) - Create a new mobile splitter.
GetMobileState, Long, (#Mobile) - Get the current mobile state.
SetMobileState, Long, Long, (#Mobile, State) - Change the mobile state.
SetActiveMobile, Long, (#Mobile) - Change the current active mobile.
GetActiveMobile, Long, () - Get the current active mobile.
ShowMobile, Long, Long, [Long], (#Mobile, State [, #TargetMobile]) - Change the mobile visibility.
MobileStyle, Long, (Style) - Change the mobile rendering style.
Some example to get started (you can also build a mobile app to see how it really behaves on phone):

Example with a tabbar and many objects

Code: Select all

EnableExplicit

; Will use iOS style on iOS device and web and Material style on Android device. To force the style, use #PB_Mobile_Android or #PB_Mobile_iOS
;MobileStyle(#PB_Mobile_Android)

Enumeration
  #Dialog
  #OpenDialogButton
  #CloseDialogButton
  #AddRowButton
  #InputName
  #List
  #PopOver
  #OpenPopOverButton
  #ClosePopOverButton
  #Option1
  #Option2
  #Option3
  #ListInSet
  #ListInSet2
  #TrackBar
  #CheckBox
  #TrackBarInfo
  #ToolBar
  #ToolBarLeftButton
  #ToolBarRightButton
  #TabBar
  #GoToTab3
EndEnumeration


If ContainerMobile(#Dialog, #PB_Mobile_Dialog, "padding:8px")
  If ContainerMobile(#PB_Any, #PB_Mobile_Row, "padding:8px")
    TextMobile(#PB_Any, "This is a dynamic dialog box", #PB_Mobile_Center)
    CloseMobileContainer()
  EndIf
  
  If ContainerMobile(#PB_Any, #PB_Mobile_Row, "padding:8px")
    ButtonMobile(#CloseDialogButton, "Close", #PB_Mobile_Center)
    CloseMobileContainer()
  EndIf
  
  CloseMobileContainer()
EndIf

; The PopOver dialog
;
If ContainerMobile(#PopOver, #PB_Mobile_PopOver)
  If ContainerMobile(#PB_Any, #PB_Mobile_Row, "padding:8px")
    ButtonMobile(#ClosePopOverButton, "Close", #PB_Mobile_Center)
    CloseMobileContainer()
  EndIf
  
  CloseMobileContainer()
EndIf

; Create an image
;
CreateImage(0, 200, 30, 24, RGB(255, 0, 0))
If StartDrawing(ImageOutput(0))
  Box(4, 4, 192, 22, RGB(255, 128, 128))
  StopDrawing()
EndIf

; Template page 1 for the TabBar
;
If ContainerMobile(#PB_Any, #PB_Mobile_Template, "", "tab1")
  
  If ContainerMobile(#PB_Any, #PB_Mobile_Row, "padding:8px")
    ButtonMobile(#OpenDialogButton, "Open Dialog", #PB_Mobile_Left)
    ImageMobile(#PB_Any, ImageID(0), #PB_Mobile_Center)
    ProgressBarMobile(#PB_Any, #PB_Mobile_Indeterminate | #PB_Mobile_Circular | #PB_Mobile_Right)
    CloseMobileContainer()
  EndIf
  
  If ContainerMobile(#PB_Any, #PB_Mobile_Row, "padding:8px")
    ButtonMobile(#AddRowButton, "Add Row", #PB_Mobile_Left)  
    InputMobile(#InputName, "", "Enter your name", #PB_Mobile_Search | #PB_Mobile_Center)
    SwitchMobile(#PB_Any, #PB_Mobile_Right)
    CloseMobileContainer()
  EndIf
  
  ListMobile(#List)
  AddListMobileItem(#List, "Hello", #PB_Mobile_Container)
    TextMobile(#PB_Any, "PopOver", #PB_Mobile_Left)
    ButtonMobile(#OpenPopOverButton, "Open PopOver !", #PB_Mobile_Center)
    SwitchMobile(#PB_Any, #PB_Mobile_Right)
  CloseMobileContainer()
  
  AddListMobileItem(#List, "", #PB_Mobile_Container)
    ButtonMobile(#GoToTab3, "Go Tab 3", #PB_Mobile_Left)
    InputMobile(#PB_Any, "Label", "Enter name", #PB_Mobile_Center | #PB_Mobile_Numeric)
    SwitchMobile(#PB_Any, #PB_Mobile_Right)
  CloseMobileContainer()
    
  AddListMobileItem(#List, "", #PB_Mobile_Container)
    IconMobile(#PB_Any, "md-volume-down", #PB_Mobile_Left)  
    TrackBarMobile(#TrackBar, 0, 200, 10, #PB_Mobile_Center)  
    IconMobile(#PB_Any, "md-volume-up", #PB_Mobile_Right)  
  CloseMobileContainer()
  
  ; Add an expandable item to the list
  ;
  If AddListMobileItem(#List, "Expand me !", #PB_Mobile_Expandable)
    If ContainerMobile(#PB_Any, #PB_Mobile_Row, "padding: 8px;", "")
      TextMobile(#TrackBarInfo, "", #PB_Mobile_Left)
      ImageMobile(#PB_Any, ImageID(0), #PB_Mobile_Center)
      SwitchMobile(#PB_Any, #PB_Mobile_Right)
      CloseMobileContainer()
    EndIf
    CloseMobileContainer()
  EndIf

  AddListMobileItem(#List, "", #PB_Mobile_Tappable | #PB_Mobile_Container)
    CheckBoxMobile(#CheckBox, "Click me !", #PB_Mobile_Left)
  CloseMobileContainer()
    
  AddListMobileItem(#List, "Options", #PB_Mobile_Header)
  If AddListMobileItem(#List, "", #PB_Mobile_Tappable | #PB_Mobile_Container)
    OptionMobile(#Option1, "Red", "Colors", #PB_Mobile_Left)
    CloseMobileContainer()
  EndIf
  If AddListMobileItem(#List, "", #PB_Mobile_Tappable | #PB_Mobile_Container)
    OptionMobile(#Option2, "Green", "Colors", #PB_Mobile_Left)
    CloseMobileContainer()
  EndIf
  If AddListMobileItem(#List, "", #PB_Mobile_Tappable | #PB_Mobile_Container)
    OptionMobile(#Option3, "Blue", "Colors", #PB_Mobile_Left)
    CloseMobileContainer()
  EndIf
  
  AddListMobileItem(#List, "Tappable item", #PB_Mobile_Tappable)
  AddListMobileItem(#List, "Chevron item", #PB_Mobile_Chevron | #PB_Mobile_Tappable)

  
  AddListMobileItem(#List, "No Divider", #PB_Mobile_Header)
  AddListMobileItem(#List, "Item 1", #PB_Mobile_NoDivider)
  AddListMobileItem(#List, "Item 2", #PB_Mobile_NoDivider)
  
  AddListMobileItem(#List, "Long Divider", #PB_Mobile_Header)
  AddListMobileItem(#List, "Item 3", #PB_Mobile_LongDivider)
  AddListMobileItem(#List, "Item 4", #PB_Mobile_LongDivider)
  AddListMobileItem(#List, "Item 5", #PB_Mobile_LongDivider)
  
  HtmlMobile("<br/>")
  ListMobile(#ListInSet, #PB_Mobile_InSet)
  AddListMobileItem(#ListInSet, "InSet", #PB_Mobile_Header)
  AddListMobileItem(#ListInSet, "Item", #PB_Mobile_NoDivider)
  AddListMobileItem(#ListInSet, "Item 2", #PB_Mobile_NoDivider)
  HtmlMobile("<br/>")
  
  CloseMobileContainer()
EndIf

; Template page 2 for the TabBar
;
If ContainerMobile(#PB_Any, #PB_Mobile_Template, "", "tab2")
  TextMobile(#PB_Any, "Page 2", #PB_Mobile_Center)
  SwitchMobile(#PB_Any, #PB_Mobile_Right)
  
  CloseMobileContainer()
EndIf

; Template page 3 for the TabBar
;
If ContainerMobile(#PB_Any, #PB_Mobile_Template, "", "tab3")
  TextMobile(#PB_Any, "Page 3", #PB_Mobile_Center)
  InputMobile(#PB_Any, "place !", "Initial text", #PB_Mobile_Search)
  
  CloseMobileContainer()
EndIf

; Template page 4 for the TabBar
;
If ContainerMobile(#PB_Any, #PB_Mobile_Template, "padding-top:8px", "tab4")
  ListMobile(#ListInSet2, #PB_Mobile_InSet)
  AddListMobileItem(#ListInSet2, "InSet", #PB_Mobile_Header)
  AddListMobileItem(#ListInSet2, "Item 1", #PB_Mobile_NoDivider)
  AddListMobileItem(#ListInSet2, "Item 2", #PB_Mobile_NoDivider)
 
  CloseMobileContainer()
EndIf
  
; This is the main page where all the components are added
;
If ContainerMobile(#PB_Any, #PB_Mobile_Page, "", "")
  
  ; A top toolbar
  ;
  ToolBarMobile(#ToolBar)
    ButtonMobile(#ToolBarRightButton, "Right", #PB_Mobile_Right)
    TextMobile(#PB_Any, "SpiderBasic App", #PB_Mobile_Center)
    ButtonMobile(#ToolBarLeftButton, "Left", #PB_Mobile_Left)
  CloseMobileContainer()
  
  TabBarMobile(#TabBar)
    AddTabBarMobileItem(#TabBar, "", "md-face", "md-face", "tab1")
    AddTabBarMobileItem(#TabBar, "Info", "", "", "tab2")
    AddTabBarMobileItem(#TabBar, "Params", "md-settings", "md-settings", "tab3", 10)
    AddTabBarMobileItem(#TabBar, "List", "md-settings", "md-settings", "tab4")
  CloseMobileContainer()

  CloseMobileContainer()
EndIf


Procedure MobileEvents()
  Debug "#Mobile: "+EventMobile() + " - EventType: " + EventType() + " - EventData: " + EventData()
  
  Select EventMobile()
    Case #OpenDialogButton
      ShowMobile(#Dialog, #True)
  
    Case #CloseDialogButton
      ShowMobile(#Dialog, #False)
      
    Case #OpenPopOverButton
      ShowMobile(#PopOver, #True, #OpenPopOverButton)
      
    Case #ClosePopOverButton
      ShowMobile(#PopOver, #False)
  
    Case #AddRowButton
      AddListMobileItem(#List, "New row (random: "+Random(20000)+")", #PB_Mobile_LongDivider)
      
    Case #TrackBar
      SetMobileText(#TrackBarInfo, Str(GetMobileState(#TrackBar)))
      
    Case #TabBar
      Debug "Tab changed: "+GetMobileState(#TabBar)
      
    Case #GoToTab3
      SetMobileState(#TabBar, 3)
      
    Case #ToolBarLeftButton
      Debug "NbBadges on tab2: " + GetMobileAttribute(#TabBar, "badge", 2)
      SetMobileAttribute(#TabBar, "badge", Str(Random(9)), 2)
      
  EndSelect
  
EndProcedure


BindEvent(#PB_Event_Mobile, @MobileEvents())
Splitter example

Code: Select all

EnableExplicit


If ContainerMobile(#PB_Any, #PB_Mobile_Template, "", "page1")
  ToolBarMobile(10)
    ButtonMobile(11, "md-menu", #PB_Mobile_Left | #PB_Mobile_Icon)
    ButtonMobile(12, "Button 2 Right", #PB_Mobile_Right)
    TextMobile(#PB_Any, "Page 1", #PB_Mobile_Center)
  CloseMobileContainer()
  
  TextMobile(#PB_Any, "Page 111111111", #PB_Mobile_Center)
  InputMobile(#PB_Any, "place !", "Initial text", #PB_Mobile_Search)
  CloseMobileContainer()
EndIf



If ContainerMobile(#PB_Any, #PB_Mobile_Template, "", "page2")
  ToolBarMobile(500)
    ButtonMobile(501, "md-menu", #PB_Mobile_Left | #PB_Mobile_Icon)
    ButtonMobile(502, "Button 2 Right", #PB_Mobile_Right)
    
    TextMobile(#PB_Any, "Page 2", #PB_Mobile_Center)
  CloseMobileContainer()
  
  TextMobile(#PB_Any, "Page2 YEAHHHH", #PB_Mobile_Center)
  InputMobile(#PB_Any, "place !", "Initial text", #PB_Mobile_Search)
  CloseMobileContainer()
EndIf


If ContainerMobile(#PB_Any, #PB_Mobile_Template, "", "menu")
  ListMobile(101)
  AddListMobileItem(101, "Hello 6", #PB_Mobile_NoDivider | #PB_Mobile_Tappable)
  AddListMobileItem(101, "Hello 7", #PB_Mobile_NoDivider | #PB_Mobile_Tappable)
  CloseMobileContainer()
EndIf


SplitterMobile(0, "menu", "page1")

Procedure MobileEvents()
  Debug "#Mobile: "+EventMobile() + " - EventType: " + EventType() + " - EventData: " + EventData()
  
  If EventMobile() = 11 Or EventMobile() = 501
    
    SetMobileState(0, 1)
  EndIf
  
  Static a
  If EventMobile() = 101
    
    SetMobileState(0, 0)
    a = 1-a
    If a = 1
      SetMobileText(0, "page2")
    Else
      SetMobileText(0, "page1")
    EndIf
    
  EndIf
EndProcedure


BindEvent(#PB_Event_Mobile, @MobileEvents())
Navigator example

Code: Select all


EnableExplicit


Enumeration
  #Navigator
  #Button1
  #Button2
  #Button3
EndEnumeration


; Create 3 different pages. It needs to be of 'Template' style to be used with the Navigator as they are hidden/shown on demand.
;
If ContainerMobile(#PB_Any, #PB_Mobile_Template, "", "page1")
  If ToolBarMobile(#PB_Any)
    TextMobile(#PB_Any, "Page 1", #PB_Mobile_Center)
    CloseMobileContainer()
  EndIf
  
  ButtonMobile(#Button1, "Push page 2", #PB_Mobile_Right)
  CloseMobileContainer()
EndIf

If ContainerMobile(#PB_Any, #PB_Mobile_Template, "", "page2")
  If ToolBarMobile(#PB_Any)
    ButtonMobile(#PB_Any, "Page 1", #PB_Mobile_Left | #PB_Mobile_BackButton) ; Back button flag adds an automatic back arrow on the toolbar
    TextMobile(#PB_Any, "Page 2", #PB_Mobile_Center)
    CloseMobileContainer()
  EndIf
  
  ButtonMobile(#Button2, "Push page 3", #PB_Mobile_Right)
  CloseMobileContainer()
EndIf

If ContainerMobile(#PB_Any, #PB_Mobile_Template, "", "page3")
  If ToolBarMobile(#PB_Any)
    ButtonMobile(#PB_Any, "Page 2", #PB_Mobile_Left | #PB_Mobile_BackButton)
    TextMobile(#PB_Any, "Page 3", #PB_Mobile_Center)
    CloseMobileContainer()
  EndIf
  
  TextMobile(#PB_Any, "Page 3", #PB_Mobile_Center)
  ButtonMobile(#Button3, "Back", #PB_Mobile_Right)
  CloseMobileContainer()
EndIf

; Create the Navigator, initialized with the first page
;
NavigatorMobile(#Navigator, "page1") 


Procedure MobileEvents()
  Debug "#Mobile: "+EventMobile() + " - EventType: " + EventType() + " - EventData: " + EventData()
    
  Select EventMobile()
    Case #Button1
      ChangeNavigatorMobilePage(#Navigator, #PB_Mobile_Push, "page2")
      
    Case #Button2
      ChangeNavigatorMobilePage(#Navigator, #PB_Mobile_Push, "page3")
      
    Case #Button3
      ChangeNavigatorMobilePage(#Navigator, #PB_Mobile_Pop)
   EndSelect
  
EndProcedure


BindEvent(#PB_Event_Mobile, @MobileEvents())

Re: SpiderBasic 2.60 beta 1 is ready to test !

Posted: Wed May 15, 2024 9:19 am
by Peter
First of all, thank you for the new version! I'm looking forward to trying out the new functions. :)

However, it seems that the new version no longer compiles (Compile/Run)? A new SpiderBasic_Compilation0.html is created, but not the corresponding spiderbasic.js

Re: SpiderBasic 2.60 beta 1 is ready to test !

Posted: Wed May 15, 2024 11:54 am
by Fred
That's wierd, I just tried to install the new beta on a new directory and it seems to work here (Windows). Can anybody else confirm ?

Re: SpiderBasic 2.60 beta 1 is ready to test !

Posted: Wed May 15, 2024 12:10 pm
by the.weavster
It's working for me.

MX Linux X86_64

Re: SpiderBasic 2.60 beta 1 is ready to test !

Posted: Wed May 15, 2024 12:13 pm
by Peter
Even new new Version is installed in a new folder, it does not work. The associated JS file is not generated. (Win 10 Pro)

Version 2.51 works as expected.

Re: SpiderBasic 2.60 beta 1 is ready to test !

Posted: Wed May 15, 2024 12:14 pm
by useful
I confirm the problem.
Windows 10 x64 LTSC Installation is just for me on an arbitrary path D:\Sys\SB260 Starting with the /PORTABLE option

p.s.
After Installation in Program Files (x86), everything worked. But for many years I used a separate folder [C/D]:\Sys\Pb_xxx(Sb_xxx)

Re: SpiderBasic 2.60 beta 1 is ready to test !

Posted: Wed May 15, 2024 3:30 pm
by erlend
Thanks for the new beta, everything works as expected ( Ubuntu 24.04 )


BR
Erlend

Re: SpiderBasic 2.60 beta 1 is ready to test !

Posted: Wed May 15, 2024 3:35 pm
by majikeyric
Thank you very much Fred !!!! :D

Re: SpiderBasic 2.60 beta 1 is ready to test !

Posted: Wed May 15, 2024 10:17 pm
by Quin
Oh my, this is incredible looking! Downloading the beta to test now!

Re: SpiderBasic 2.60 beta 1 is ready to test !

Posted: Thu May 16, 2024 4:17 am
by useful
Did I understand correctly? Do we have a new opportunity to build android apps for linux?
All times are UTC
Page 1 of 6

Powered by phpBB® Forum Software © phpBB Limited