Seite 1 von 3

Projektidee Html Formular Code Generator

Verfasst: 14.08.2013 15:03
von derschutzhund
Hallo liebe PureBasicgemeinde!

Bin gerade dabei ein Programm zu erstellen, welches unter anderem am Ende Daten in gedruckter Form erzeugen soll.
Im Grunde ja nichts Kompliziertes aber ich möchte mit einem PC-Code möglichst für alle drei Betriebssysteme Win,Linux,mac ein lauffähiges Prog. erzeugen und da wird es schon etwas haarig!
Zuerst hatte ich mit purePDF experimentiert welches unter Win wunderbar läuft aber unter linux nicht und wohl unter mac schon mal gar nicht!
Der zweite Ansatz war die direkte Ausgabe über den Drucker, wobei ich aber immer noch, für Archivzwecke, das Dokument als Datei haben möchte. Auch das läuft unter Win aber irgendwie nicht mit meinem Linux zusammen und ich vermute mal, dass es dann unter Mac zusätzliche Probleme gibt, die auch wieder im Code extra angepasst werden müssen.
Nun gibt es aber noch die Möglichkeit nicht eine pdf-Datei, sondern eine html-Datei zu erzeugen und das mit absoluten PureBasic-Textfunktionen.

Das läuft unter jedem Betriebssystem ohne jede Anpassung und vor allem bei gleichbleibender Qualität! Dies hat mich besonders auch bei der direkten Ausgabe mit der Printfunktion gestört, wo es eben nicht so war.
Zusätzlich könnte man die erzeugten html-Dateien natürlich sogar ins Internet laden. Ist zwar zunächst nicht das Ziel aber halt möglich!
Von dieser Idee ausgehend habe ich mich etwas mit html beschäftigt. Bisher war ich davon ausgegangen, dass es nicht so einfach möglich sei, Texte, Bilder und Linien an beliebiger Position in einem HTML-Formular anzuordnen.
Das ist aber zum Glück nicht so!
Diese Standardelemente lassen sich in einer einzigen html-Datei jeweils mit einer Zeile beliebig frei positionieren und damit wird die Sache als universelles Ausgabeformat sehr interessant!

- hohe Druckqualität
- ins Internet ladbar
- PC-Code ohne jegliche Änderung auf allen Betriebssystemen lauffähig!!!

Jetzt bin ich gerade dabei ein html-Formular in PB zu programmieren, und da es natürlich ein schönes Design haben soll, muss ich ständig das Programm neu starten, die html-datei erzeugen und dann wieder Koordinaten ändern und so weiter.
Das nervt etwas also bin ich auf folgende Idee gekommen:

Man könnte die Elemente erst mal in einem Canvas zeichnen und dann daraus automatisch den PB-code für die Erzeugung des html-Code generieren. Also einen Html Formular Code Generator!
Den erzeugten PB-Code würde man dann ganz normal in ein .pb einbauen.

Hat jemand Interesse an so einem Generator? Oder gibt es soetwas vielleicht schon?

LG

Wolfgang

Re: Projektidee Html Formular Code Generator

Verfasst: 14.08.2013 15:38
von Bisonte
Sowas ist doch der integrierte Formdesigner... oder denke ich da am Thema vorbei , Also keine GUI ?
Im anderenfall noch die Dialog Lib die in 5.20 dazukommt... ?

Re: Projektidee Html Formular Code Generator

Verfasst: 14.08.2013 15:40
von STARGÅTE
derschutzhund möchte ein Generator schreiben, der den Output von 2DDrawing in HTML umwandelt, damit es verlustfrei skalierbar ist.

Re: Projektidee Html Formular Code Generator

Verfasst: 14.08.2013 15:51
von derschutzhund
STARGÅTE hat geschrieben:derschutzhund möchte ein Generator schreiben, der den Output von 2DDrawing in HTML umwandelt, damit es verlustfrei skalierbar ist.
Genau!!!

Re: Projektidee Html Formular Code Generator

Verfasst: 14.08.2013 18:13
von STARGÅTE
Im Prinzip ist das ja n andere Version von dem hier:
PBtoHTML5 Compiler [pre-alpha]

Mit dem Unterschied, dass du bestimmt den reihen Output haben willst, und nicht den Code für HTML der den Output erzeugt.

Re: Projektidee Html Formular Code Generator

Verfasst: 14.08.2013 21:59
von derschutzhund
STARGÅTE hat geschrieben:Im Prinzip ist das ja n andere Version von dem hier:
PBtoHTML5 Compiler [pre-alpha]

Mit dem Unterschied, dass du bestimmt den reihen Output haben willst, und nicht den Code für HTML der den Output erzeugt.
Nein, ich möchte am Ende PC-Code haben der ein html erzeugt also so z.B. so was:

Code: Alles auswählen

Procedure mapbewerzeug(EventType)
   Define susname$, klasse$, auswahl, nr, bemtext$, xpos, ypos
   
   susname$ = GetGadgetText(String_map_susname)
   klasse$ = GetGadgetText(String_map_klasse)
   auswahl = CountGadgetItems(ListView_map_gewaehlte)
   
 ;  If susname$ = "?" Or klasse$ = "?" Or auswahl = 0
  ;    MessageRequester("Achtung, es fehlen Angaben!","Bitte Schülernamen und Klasse eintragen sowie Bemerkungen wählen")
   ;Else   
      
   If CreateFile(#DATEI_REPORT, klassenverz$ + "mappe " + susname$ +".html") 
      WriteStringN(#DATEI_REPORT,"<!DOCTYPE HTML PUBLIC " + Chr(34) + "-//W3C//DTD HTML 4.01//EN" + Chr(34) + ">")
      WriteStringN(#DATEI_REPORT,"<!<html><head><title>mappe-" + susname$ +"</title>")
      WriteStringN(#DATEI_REPORT,"<!</head><body>")
;      WriteStringN(#DATEI_REPORT,"<div style=" + Chr(34) + "position:absolute; left:10px; top: 8px; " + Chr(34) + ">" + "Mappenbewertung "+ susname$ + " erzeugt mit SuS2013</div>")
xpos = 90
ypos = 20
bemtext$ = "Kontrolle und Bewertung des Schnellhefters"
WriteStringN(#DATEI_REPORT,"<div style=" + Chr(34) + "position:absolute; left:" + xpos + "px; top:" + ypos + "px; text-decoration:underline; text-shadow:black 3px 2px 4px;font-size:32px;" + Chr(34) + ">" + bemtext$ + "</div>")

xpos = 80
ypos = 80
bemtext$ = "Name: Hans Dampf"
WriteStringN(#DATEI_REPORT,"<div style=" + Chr(34) + "position:absolute; left:" + xpos + "px; top:" + ypos + "px; font-weight:bold; font-size:14px;" + Chr(34) + ">" + bemtext$ + "</div>")

xpos = 250
bemtext$ = "Klasse: 6b"
WriteStringN(#DATEI_REPORT,"<div style=" + Chr(34) + "position:absolute; left:" + xpos + "px; top:" + ypos + "px; font-weight:bold; font-size:14px;" + Chr(34) + ">" + bemtext$ + "</div>")

xpos = 400
bemtext$ = "Fach: Physik"
WriteStringN(#DATEI_REPORT,"<div style=" + Chr(34) + "position:absolute; left:" + xpos + "px; top:" + ypos + "px; font-weight:bold; font-size:14px;" + Chr(34) + ">" + bemtext$ + "</div>")

xpos = 550
bemtext$ = "Datum: 15.05.1959"
WriteStringN(#DATEI_REPORT,"<div style=" + Chr(34) + "position:absolute; left:" + xpos + "px; top:" + ypos + "px; font-weight:bold; font-size:14px;" + Chr(34) + ">" + bemtext$ + "</div>")

xpos = 90
ypos = 120
bemtext$ = "Bei der Durchsicht deines Schnellhefters konnte ich folgendes feststellen:"
WriteStringN(#DATEI_REPORT,"<div style=" + Chr(34) + "position:absolute; left:" + xpos + "px; top:" + ypos + "px; font-weight:bold; font-size:18px;" + Chr(34) + ">" + bemtext$ + "</div>")

xpos = 80
ypos = 150
WriteStringN(#DATEI_REPORT,"<div style=" + Chr(34) + "position:absolute; left:" + xpos + "px; top:" + ypos + "px; height:50px; width:560px; background-color:#FFFFFF; box-shadow:4px 4px #666; border-radius: 10px;border:2px solid #000000; padding:10px;" + Chr(34) + "></div>")

xpos = 90
ypos = 170
bemtext$ = "Deine Mappe hat einige Mängel, die du schnell beheben solltest!"
WriteStringN(#DATEI_REPORT,"<div style=" + Chr(34) + "position:absolute; left:" + xpos + "px; top:" + ypos + "px; font-weight:bold; font-size:18px;" + Chr(34) + ">" + bemtext$ + "</div>")

xpos = 90
ypos = 240
bemtext$ = "Bei der Verbesserung solltest du besonders auf folgende Punkte achten:"
WriteStringN(#DATEI_REPORT,"<div style=" + Chr(34) + "position:absolute; left:" + xpos + "px; top:" + ypos + "px; font-weight:bold; font-size:17px;" + Chr(34) + ">" + bemtext$ + "</div>")

; -------------------- bis hier hin der Kopf
nr = 0
xpos = 50
ypos = 50
;       Repeat
 ;         If Len(Trim(GetGadgetItemText(ListView_map_gewaehlte,nr))) > 0
  ;        bemtext$ = GetGadgetItemText(ListView_map_gewaehlte,nr)
   ;       bemtext$ = Mid(bemtext$,FindString(bemtext$,";")+1,Len(bemtext$))
    ;      WriteStringN(#DATEI_REPORT,"<div style=" + Chr(34) + "position:absolute; left:" + xpos + "px; top:" + ypos + "px; font-size:12px;" + Chr(34) + ">" + bemtext$ + "</div>")
     ;     ypos = ypos + 20
      ; EndIf
   ;       nr = nr +1
    ;   Until CountGadgetItems(ListView_map_gewaehlte) = nr
       
 ; ------------------- ab hier der Fuß    
 xpos = 60
 ypos = 860
 WriteStringN(#DATEI_REPORT,"<div style=" + Chr(34) + "position:absolute; left:" + xpos + "px;top:" + ypos + "px; width: 600px; border-top:2px solid #000000" + Chr(34) + "></div>") 
 
 xpos = 80
 ypos = ypos +5
 bemtext$ = "Nach dem momentanen Stand bewerte ich deine Mappe mit der Note: 1-2"
 WriteStringN(#DATEI_REPORT,"<div style=" + Chr(34) + "position:absolute; left:" + xpos + "px; top:" + ypos + "px; font-weight:bold; font-size:17px;" + Chr(34) + ">" + bemtext$ + "</div>")
 
 xpos = 80
 ypos = ypos +30
 bemtext$ = "Kenntnisnahme"
 WriteStringN(#DATEI_REPORT,"<div style=" + Chr(34) + "position:absolute; left:" + xpos + "px; top:" + ypos + "px; font-weight:bold; font-size:14px;" + Chr(34) + ">" + bemtext$ + "</div>")
 
 xpos = 80
 ypos = ypos + 55
 WriteStringN(#DATEI_REPORT,"<div style=" + Chr(34) + "position:absolute; left:" + xpos + "px;top:" + ypos + "px; width: 100px; border-top:2px solid #000000" + Chr(34) + "></div>") 
 
 xpos = 300
 WriteStringN(#DATEI_REPORT,"<div style=" + Chr(34) + "position:absolute; left:" + xpos + "px;top:" + ypos + "px; width: 350px; border-top:2px solid #000000" + Chr(34) + "></div>") 
 
 xpos = 100
 ypos = ypos +5 
 bemtext$ = "Datum"
 WriteStringN(#DATEI_REPORT,"<div style=" + Chr(34) + "position:absolute; left:" + xpos + "px; top:" + ypos + "px; font-weight:bold; font-size:14px;" + Chr(34) + ">" + bemtext$ + "</div>")
 
 xpos = 350
 ypos = ypos
 bemtext$ = "Unterschrift eines Erziehungsberechtigten"
 WriteStringN(#DATEI_REPORT,"<div style=" + Chr(34) + "position:absolute; left:" + xpos + "px; top:" + ypos + "px; font-weight:bold; font-size:14px;" + Chr(34) + ">" + bemtext$ + "</div>")
 
 xpos = 80
 ypos = ypos +35
 bemtext$ = "Bitte dieses Blatt an der aktuellen Stelle in deinen Schnellhefter einheften!"
 WriteStringN(#DATEI_REPORT,"<div style=" + Chr(34) + "position:absolute; left:" + xpos + "px; top:" + ypos + "px; font-weight:bold; font-size:12px;" + Chr(34) + ">" + bemtext$ + "</div>")
 
 xpos = 80
 ypos = ypos +20
 bemtext$ = "Bitte die Seitennummer auf dieses Blatt schreiben und in ROT ins Inhaltsverzeichnis eintragen!"
 WriteStringN(#DATEI_REPORT,"<div style=" + Chr(34) + "position:absolute; left:" + xpos + "px; top:" + ypos + "px; font-weight:bold; font-size:12px;" + Chr(34) + ">" + bemtext$ + "</div>")
 
 WriteStringN(#DATEI_REPORT,"</body></html>")        
      CloseFile(#DATEI_REPORT)
   EndIf
   
   CompilerSelect #PB_Compiler_OS
      CompilerCase #PB_OS_Linux
         RunProgram("defaultbrowser", klassenverz$ + "mappe " + susname$ +".html","")
      CompilerCase #PB_OS_Windows
         RunProgram(klassenverz$ + "mappe " + susname$ +".html")
      CompilerCase #PB_OS_MacOS
         
   CompilerEndSelect    
 ;  EndIf
EndProcedure
Das ist mein aktuelles Projekt und noch nicht fertig! Also nur als Beispiel nehmen!!!

Wichtig ist, dass die Erzeugung dieses Codes grafisch bzw. interaktiv erfolgt. Das ist dann grundsätzlich schon etwas anders als bei dem anderen Projekt!
Im Grunde auch nur eine Fleißarbeit :wink:

EDIT: Ach ja hatte ich noch vergessen! Hat man dieses Gerüst erst mal erzeugt fügt man natürlich Variable für z.B. Namen, etc. ein und erzeugt dann aus dem Programm heraus variable Ausdrucke.

LG

Wolfgang

Re: Projektidee Html Formular Code Generator

Verfasst: 14.08.2013 22:55
von NicTheQuick
Du kannst an vielen Stellen bei HTML statt " auch einfach nur ' benutzen. Das macht es gleich schon übersichtlicher, weil du Chr(34) nicht schreiben musst.

Ansonsten ist es doch eigentlich viel einfacher, wenn du ein fertiges HTML-Template als Datei machst, in der dann Platzhalter wie %xpos%, %ypos%, %bemtext%, usw. stehen, die Datei dann einliest, die entsprechenden Ausdrücke ersetzt und dann den neuen String wieder in eine Datei schreibst, oder?

Re: Projektidee Html Formular Code Generator

Verfasst: 14.08.2013 23:04
von derschutzhund
NicTheQuick hat geschrieben:Du kannst an vielen Stellen bei HTML statt " auch einfach nur ' benutzen. Das macht es gleich schon übersichtlicher, weil du Chr(34) nicht schreiben musst.

Ansonsten ist es doch eigentlich viel einfacher, wenn du ein fertiges HTML-Template als Datei machst, in der dann Platzhalter wie %xpos%, %ypos%, %bemtext%, usw. stehen, die Datei dann einliest, die entsprechenden Ausdrücke ersetzt und dann den neuen String wieder in eine Datei schreibst, oder?
Das geht natürlich auch aber dann muss das Design dieser HTML-Datei auch erst mal von Hand erstellt werden.
Der Vorteil am Generator wäre ja, dass das Design per drag and drop und verschieben der Elemente erzeugt werden kann.

Re: Projektidee Html Formular Code Generator

Verfasst: 15.08.2013 03:12
von Derren
Wenn du es zur Übung machen willst, dann nur zu. Aber wozu das Rad neu erfinden?
http://www.hongkiat.com/blog/free-form-builders/

Re: Projektidee Html Formular Code Generator

Verfasst: 15.08.2013 10:25
von derschutzhund
Derren hat geschrieben:Wenn du es zur Übung machen willst, dann nur zu. Aber wozu das Rad neu erfinden?
http://www.hongkiat.com/blog/free-form-builders/
Ich glaube es ist immer noch nicht klar geworden worum es eigentlich geht obwohl ich doch einen Beispielcode, so wie er automatisch vom Generator erzeugt werden soll angefügt habe!!!

Ich will das Rad nicht neu erfinden weil es so ein Rad noch nicht gibt! Es gibt zur Zeit keine Möglichkeit per drag and drop PC-Code zu erzeugen der dann html-Dateien generieren kann!
Es gibt die Möglichkeit den PB-Code von Hand einzutippen oder es gibt die Möglichkeit mit Hilfe eines Editors eine HTML-Seite zu erstellen die dann vom PB-Prog. analysiert wird um dann die Variablen durch die Daten zu ersetzen. Das habe ich in einem anderen Programm unter Delphi vor Jahren auch schon mal so gemacht.
Nachteil:
- Man braucht dann wieder einen zusätzlichen, grafischen HTML-Editor
- Man muss PB-Code schreiben der diese Datei bearbeitet

Das kann man sich alles sparen wenn man einen Generator hat der gleich beides automatisch macht.
Nebenbei hat man damit die erste universelle Ausgabemöglichkeit für alle Betriebssysteme!
Soetwas halte ich für einen Crosscompiler wie PB für absolut wichtig!

Sorry aber besser kann ich die Sache nicht erklären.
Wenn niemand die Möglichkeiten erkennt dann ist das ja auch kein Problem .

LG

Wolfgang