PureBasic

■ Qu'est ce que PB2Web ?
Développée en Pure Basic par KIffi (Forum Anglais), PB2Web (Pure Basic to Web) est un outil (ou plugin) paramétrable depuis l'éditeur officiel de Pure Basic permettant de convertir du code Pure Basic vers un code HTML + JavaScript.

■ Site de PB2Web http://pb2web.de (Fermé pour le moment)

■ Fil de discussion (Google Group) https://groups.google.com/forum/#!forum/pb2web

■ Procédure d'installation http://www.falsam.com/forum/viewtopic.php?id=30

■ On en parle aussi sur http://www.falsam.com/forum/viewforum.php?id=11

Si vous avez des connaissances en Php, vous verrez que communiquer avec MySql n'est pas si difficile que ça.

Version actuelle: (20161220) - Les sources sont inclus dans cette distribution.

■ Mon premier code issu de l'aide Pure Basic.
J'ai pris un exemple d'un code figurant dans l'aide permettant de dessiner sur un canvas afin de le rendre compatible PB2Web.

Code : Tout sélectionner

XIncludeFile "D:\Applications\Pure Basic\Pb2Web\p2w.pbi"

P2W_Converter_SetProfile("pb2webtest")

Enumeration 
  #Mainform
  #Canvas
EndEnumeration

Global Draw.b, TEvent.i

Procedure CanvasEvent()
  
  TEvent=EventType()
  
  Select TEvent
    Case #PB_EventType_LeftButtonDown
      Draw = #True
    Case #PB_EventType_LeftButtonUp
      Draw = #False
  EndSelect
  
  If Draw = #True
    If StartDrawing(CanvasOutput(#Canvas)) 
      x = GetGadgetAttribute(#Canvas, #PB_Canvas_MouseX)
      y = GetGadgetAttribute(#Canvas, #PB_Canvas_MouseY)
      Circle(x, y, 10, RGB(Random(255), Random(255), Random(255)))
      StopDrawing()  
    EndIf  
  EndIf
EndProcedure

OpenWindow(#Mainform, 0, 0, 500, 500, "CanvasGadget", #PB_Window_SystemMenu | #PB_Window_ScreenCentered)
CanvasGadget(#Canvas, 0, 0, 500, 500)

BindGadgetEvent(#Canvas, @CanvasEvent(), #PB_EventType_LeftButtonDown)
BindGadgetEvent(#Canvas, @CanvasEvent(), #PB_EventType_LeftButtonUp)
BindGadgetEvent(#Canvas, @CanvasEvent(), #PB_EventType_MouseMove)

Rien de sorcier comme vous pouvez le voir.

Aucun CGI n'est nécessaire à l’exécution de ce code.

■ Astuces et précautions.

Le code minimum.

Code : Tout sélectionner

;Inclure "p2w.pbi" 
XIncludeFile "D:\Applications\Pure Basic\Pb2Web\p2w.pbi"

;Le nom du profil à prendre en compte pour la conversion
P2W_Converter_SetProfile("pb2webtest")

;Votre code Pure Basic en dessous
OpenWindow(0, 0, 0, 400, 400, "Hello World", #PB_Window_WindowCentered)


;Il n'est pas necessaire de coder une boucle événementielle 
;Mais ça peut être utile de la mettre pour des tests en natif
P2W_Converter_Begin_Comment
  Repeat : Until WaitWindowEvent() = #PB_Event_CloseWindow
P2W_Converter_End_Comment

Assurez vous que Javascript soit bien activé dans les paramètres de votre navigateur..

La variable a$ ne contiendra pas la même valeur que la variable $A.
Attention à la casse de vos variables.

Code : Tout sélectionner

XIncludeFile "D:\Applications\Pure Basic\Pb2Web\p2w.pbi"

P2W_Converter_SetProfile("pb2webtest")

a$ = "Test" ;Est correct. Debug A$ va générer une erreur dans votre navigateur.
Debug a$

Variables et constantes ne font pas bon ménages.
Si vous prévoyez des variables, veillez à ne pas les nommer de la même manière que les constantes.
Exemple #User et user prendront les valeurs deviendront var user et var user après génération du code Pure Basic.

Kiffi a écrit :unfortunately i have to remove the '#' - character during the conversion otherwise you get an javascript-error.
so '#user' becomes 'user' and stands in conflict with your regular 'user'-variable.
i think there is no other solution than to rename either your constant or your variable.

Il n'est pas nécessaire de coder la boucle événementielle.
Le code généré est une application Java Script. Il n'est pas nécessaire d'introduire une boucle événementielle dans votre code Pure Basic. Toutefois si vous souhaitez tester votre code en natif avant de le convertir pour le web, il est possible d'ajouter une simple boucle évenementielle dans votre code sans qu'il soit pris en compte par l'utilitaire de conversion PB2Web en insérant à la fin de votre code.

Code : Tout sélectionner

P2W_Converter_Begin_Comment
  Repeat : Until WaitWindowEvent()=#PB_Event_CloseWindow
P2W_Converter_End_Comment

Connaitre le numéro de version actuelle de pb2web.
Vous pouvez connaitre votre numéro de version actuelle lors de la conversion du code Pure Basic

Oui, à la louche cela semble très prometteur, j'ai fait quelques tests également de mon côté.
Il manque un certain nombre d'implémentation de fonctions... Affaire à suivre...

J'ai amélioré le code ci-dessus en ajoutant un bouton pour effacer le dessin précédent. L'occasion aussi pour moi de ma familiariser avec de nouvelles façons de gérer les événements (BindGadgetEvent() et BindEvent()).

Code : Tout sélectionner

XIncludeFile "D:\Applications\Pure Basic\Pb2Web\p2w.pbi"

P2W_Converter_SetProfile("pb2webtest")

Enumeration 
  #Mainform
  #Canvas
  #Clear
EndEnumeration

Global Draw.b, TEvent.i

;- Unités de traitement du Canvas
Procedure CanvasClear()
  If StartDrawing(CanvasOutput(#Canvas)) 
    Box(0, 0, 495, 450, RGB(255, 255, 255))
    StopDrawing() 
  EndIf
EndProcedure

Procedure CanvasEvent()  
  TEvent=EventType()
  
  Select TEvent
    Case #PB_EventType_LeftButtonDown
      Draw = #True
    Case #PB_EventType_LeftButtonUp
      Draw = #False
  EndSelect
  
  If Draw = #True
    If StartDrawing(CanvasOutput(#Canvas)) 
      x = GetGadgetAttribute(#Canvas, #PB_Canvas_MouseX)
      y = GetGadgetAttribute(#Canvas, #PB_Canvas_MouseY)
      Circle(x, y, 10, RGB(Random(255), Random(255), Random(255)))
      StopDrawing()  
    EndIf  
  EndIf
EndProcedure


;-Unités de traitement de la fenetre
Procedure MainFormClose()
  MessageRequester("Information","Fin de la démonstration"+#CRLF$+"A bientot")
EndProcedure

Procedure MainFormShow()
  OpenWindow(#Mainform, 0, 0, 500, 500, "CanvasGadget", #PB_Window_SystemMenu | #PB_Window_ScreenCentered)
  SetWindowColor(#Mainform, RGB(255, 239, 213))
               
  CanvasGadget(#Canvas, 5, 5, 495, 450)
  CanvasClear()

  ButtonGadget(#Clear, 210, 460, 80, 24, "Clear")

  ;Evenement canvas
  BindGadgetEvent(#Canvas, @CanvasEvent(), #PB_EventType_LeftButtonDown)
  BindGadgetEvent(#Canvas, @CanvasEvent(), #PB_EventType_LeftButtonUp)
  BindGadgetEvent(#Canvas, @CanvasEvent(), #PB_EventType_MouseMove)

  ;Evenement Bouton #Clear
  BindGadgetEvent(#Clear, @CanvasClear())

  ;Fermeture de windows
  BindEvent(#PB_Event_CloseWindow, @MainFormClose(), #Mainform)
EndProcedure

;-Start
MainFormShow()

en principe lorsque tu ne devrai pas avoir a faire :

Code : Tout sélectionner

 BindGadgetEvent(#Canvas, @CanvasEvent(), #PB_EventType_LeftButtonDown)
  BindGadgetEvent(#Canvas, @CanvasEvent(), #PB_EventType_LeftButtonUp)
  BindGadgetEvent(#Canvas, @CanvasEvent(), #PB_EventType_MouseMove)

car t'es pas obligé de preciser le type d'evenement "#PB_EventType_LeftButtonDown","#PB_EventType_LeftButtonUp","#PB_EventType_MouseMove"

car tu traites les event dans ta procedure de Callback

Code : Tout sélectionner

Procedure CanvasEvent() 
  TEvent=EventType()
 
  Select TEvent
    Case #PB_EventType_LeftButtonDown
      Draw = #True
    Case #PB_EventType_LeftButtonUp
      Draw = #False
Case #PB_EventType_MouseMove ; ---<< a ajouter
  EndSelect

donc dans ce cas je pense qu'un seul

Code : Tout sélectionner

 BindGadgetEvent(#Canvas, @CanvasEvent())

devrai suffire ! (sans preciser le type d'event ... )
cela va de toute façon sauter dans ta procedure de callback "Procedure CanvasEvent() "
et c'est elle qui determine a quel event elle reagit .. par le Select-case

a ce que j'ai compris le BindGadgetEvent() est un Callback Dedié a un gadget precis
donc on defini une procedure par Gadget ... puis c'est dans cette procedure qu'on Gere l'event ou les Events du gadget ...

ça permet d'avoir autant de callback qu'on a de gadget

C'est ce que j'ai fait initialement, mais ça ne fonctionne pas une fois converti. Par contre en natif ça fonctionne.

C'est super intéressant, ça !

Et ça marche avec les jeux ? (en openGL par exemple)
Sur un canvas, oui, ça doit marcher, mais en screen, faudrait que je teste ça ^^.

En tout cas, c'est vraiment intéressant, je trouve.

EDIT :
j'ai testé en local, ça marche. Mais quels fichiers doit-on transférer sur notre site et que faut-il pour que ça fonctionne ?
Car lorsque je le mets sur mon persofree, ça ne marche pas :
http://blendman.free.fr/dev/pb/pb2web/

De plus, chez moi, lors de la conversion, j'ai un bug : en dessinant sur le canvas ou la fenêtre, j'en déplace le contenu ^^ (pas sur les exemples de Falsam).

Une nouvelle version de PB2Web est disponible mais je pense qu'elle est buguée. (Ce n'est plus la cas)

Effectivement c'est assez drôle

J'ai essayé les codes de démos et le souci est le même. j'ai posté ce bug sur le forum anglais.

En fait c'est l'ensemble des gadgets qui est impacté par ce bug !!!.

[Edit]Ce bug est résolu avec la dernière version.

Pour résoudre temporairement ce bug en attendant une nouvelle version de pb2web :

Avec un editeur de texte (Notepad++ par exemple), ouvrez le fichier \system\libraries\pb2web\pb2web.js se trojuvant dans votre dossier d'installation de PB2Web et cherchez la ligne contenant selector.draggable(); et supprimez cette ligne.

Kiffi a écrit :I will upload a fixed version as soon as possible.

Vivement cette nouvelle version

[Edit]Ce bug est résolu avec la dernière version.

Oui, je suis avec kiffi pour corriger quelques anomalies avec mon projet qui ne compile pas très bien avec pb2web. Il a déjà un exe non officiel qui corrige des bricoles, mais il reste quand même quelques copeaux...

Ah ouais, j'ai testé et c'est juste excellent ce qu'il a fait !

J'ai testé et ça passe sous firefox et chrome.
Du coup, vous pensez que ça fonctionne sous Android, chromebook, Mac, Linux, etc ?
Car ce serait énorme du coup

.

Edit :
Sur ce code, vous savez pourquoi on ne voit pas les onglets ?
[edit 2 : ok trouvé, il faut mettre toutes les enumerations dans un seul

Code : Tout sélectionner

XIncludeFile "..\p2w.pbi"

P2W_Converter_SetProfile("pb2webtest")


Enumeration 
  #Window1 
  #G_Panel  
  #Button1
EndEnumeration

OpenWindow(Window1 , 0, 0, 1024, 768, "test", #PB_Window_BorderLess|#PB_Window_SizeGadget)

If PanelGadget(#G_Panel, 10,50,100,600)
  
  AddGadgetItem(#G_Panel, -1, "Tool")
  ButtonGadget(#Button1, 10, 120, 100, 30, "Button1")
  AddGadgetItem(#G_Panel, -1, "Options")
  
  CloseGadgetList()
EndIf

P2W_Converter_Begin_Comment
	Repeat : Until WaitWindowEvent() = #PB_Event_CloseWindow
P2W_Converter_End_Comment

EDIT 3 :
j'ai modifié un peu le code de falsam, c'est vraiment sympa son convertisseur :
http://www.dracaena-studio.com/purebasic/paint/

En effet cela a l'air prometteur

@++

Une nouvelle version de PB2Web est disponible sur le site de Kifi

Correction du bug que j'ai signalé plus haut.

Ajout de SetGadgetItemText() et GetGadgetItemText() pour les controls EditorGaget() ainsi que WebGadget()

@GG : J'ai vu que tu te lances dans la conversion d'un code Pure Basic. Ce n'est que le début de PB2Web et l'outils est loin pour le moment d'être compatible avec le langage Pure Basic.

Les bibliothèques suivantes NE SONT PAS encore implémentées et certaines sont essentielles à la création d'un site comportant une base de données par exemple.
AudioCD, Cipher, Database, Dialog, Drag & Drop, File, FileSystem, Ftp, Help, Http, Library,
Mail, Memory, Network, OnError, Packer, Printer, Process, Regular Expression, Runtime, Scintilla,
Serial Port, SysTray, Thread, XML, 2D and 3D Games & Multimedia Libraries.

Malgré ce manque, il est quand même possible de créer des choses intéressantes d'autant plus qu'on peut insérer du code jquery java dans du code pure basic.

@Blendman : Sympa ta démo

blendman a écrit :Du coup, vous pensez que ça fonctionne sous Android, chromebook, Mac, Linux, etc ?
Car ce serait énorme du coup .

Je crois que kcc a fait un essai sous Android. L'affichage est correcte mais pas possibilité de peindre. J'ai fait l'essai sur une tablette surface équipé de window RT. L'affichage est correcte mais la peinture n'est pas possible non plus. Je pense que ça vient de la déclaration de la fenêtre qui elle peut bouger. Il faut peut être une application full screen sans déclarer la fenêtre mais j'avoue que je ne suis pas convaincu.

falsam a écrit :Une nouvelle version de PB2Web est disponible sur le site de Kifi

Correction du bug que j'ai signalé plus haut.

Ajout de SetGadgetItemText() et GetGadgetItemText() pour les controls EditorGaget() ainsi que WebGadget()

C'est cool car il avance super vite en plus

.
Je me demande si Fred n'est pas intéressé par cet outil, car c'est quand même assez énorme comme utilitaire

.

Avec le canvas, on déjà réalisé des petits jeux en purebasic pour le Web.

Les bibliothèques suivantes NE SONT PAS encore implémentées et certaines sont essentielles à la création d'un site comportant une base de données par exemple.

Il manque aussi des choses dans certaines lib déjà commencées (SaveImage par exemple n'est pas encore possible)

Je crois que kcc a fait un essai sous Android. L'affichage est correcte mais pas possibilité de peindre. J'ai fait l'essai sur une tablette surface équipé de window RT. L'affichage est correcte mais la peinture n'est pas possible non plus. Je pense que ça vient de la déclaration de la fenêtre qui elle peut bouger. Il faut peut être une application full screen sans déclarer la fenêtre mais j'avoue que je ne suis pas convaincu.

Le problème du fullscreen c'est qu'on a alors pas de menu, ce qui est balot ^^.
A moins de passer par une bidouille bien sûr.

Tu as essayé avec RT et une souris ?
Peut-être c'est le coté tactile qui pose problème.

PureBasic

PB2Web : Pure Basic to JavaScript (Windows)

PB2Web : Pure Basic to JavaScript (Windows)

Re: PB2Web : Coder en PB et voyer le résultat sur le web

PB2Web : Codez en PB et convertissez pour le web

Re: PB2Web : Codez en PB et convertissez pour le web

Re: PB2Web : Codez en PB et convertissez pour le web

Re: PB2Web : Codez en PB et convertissez pour le web

Re: PB2Web : Codez en PB et convertissez pour le web

Re: PB2Web : Codez en PB et convertissez pour le web

Re: PB2Web : Codez en PB et convertissez pour le web

Re: PB2Web : Codez en PB et convertissez pour le web

Re: PB2Web : Codez en PB et convertissez pour le web

Re: PB2Web : Codez en PB et convertissez pour le web

Re: PB2Web : Codez en PB et convertissez pour le web

Re: PB2Web : Codez en PB et convertissez pour le web

Re: PB2Web : Codez en PB et convertissez pour le web