Forum - MCS Electronics

 

FAQFAQ SearchSearch RegisterRegister Log inLog in

Webserver - Wysiwyg HTML editor

 
Post new topic   Reply to topic    www.mcselec.com Forum Index -> EASY TCP/IP
View previous topic :: View next topic  
Author Message
bibibo

Bascom Member



Joined: 30 Nov 2009
Posts: 168

slovakia.gif
PostPosted: Sat Nov 16, 2013 9:52 pm    Post subject: Webserver - Wysiwyg HTML editor Reply with quote

Hello, what HTML editor do you use? I use Nvu or Amaya and then HTML to Bascom converter but website is not correct. Could you recommend me the best solution ?
Back to top
View user's profile
bibibo

Bascom Member



Joined: 30 Nov 2009
Posts: 168

slovakia.gif
PostPosted: Sat Nov 16, 2013 11:00 pm    Post subject: Reply with quote

I am using LibreOffice and it is better than Nvu or Amaya but still it is not correct. There is missing a part of code at the end.
I do not know why.

Code:
$Regfile="m128def.dat"
$Crystal=7372800
$hwstack=128
$swstack=128
$framesize=128


$baud = 9600



Config Spi = Hard , Interrupt = Off , Data Order = Msb , Master = Yes , Polarity = Low , Phase = 0 , Clockrate = 4 , Noss = 0
'Init the spi pins                              192.168.1.200
Spiinit

Print "Init , set IP to 172.18.0.200"                       ' display a message

Config Pinb.4 = Output
W5200_nreset Alias Portb.4
Set W5200_nreset

Config Pinb.5 = Input
W5200_nint Alias Portb.5

Reset W5200_nreset
Waitms 1
Set W5200_nreset
Waitms 350

Const Authenticate = 0

Enable  INTERRUPTS

Config Tcpip = Noint , Mac = 12.128.12.34.56.78 , Ip = 192.168.1.200 , Submask = 255.255.255.0 , Gateway = 192.168.1.1 , Localport = 1000 , Chip = W5200 , Spi = 1 , Cs = Portb.0

'config pinc.1 = output

'portc.0 = 1

Dim Shtml As String * 15 , Sheader As String * 22
Dim Tempw As Byte
Dim I As Byte , Bcmd As Byte , P1 As Byte , P2 As Byte , Size As Word
Dim Bauth As Byte , Ipcon As Long                           ' for optional authentication
Dim S As String * 1000                              ' was
Dim Buf(1000) As Byte At S Overlay                       ' this is the same data as S but we can treat it as an array now
Dim Flag As Byte
Dim Tempwsize As Word
Dim Wsize As Word
Dim Bgenerate As Bit
Dim Ihitcounter As Integer
Dim Hits As String * 4

I = 0                                                       ' we use just 1 connection with number 0
Do
    Tempw = Socketstat(i , 0)                               ' get status
    Select Case Tempw
       Case Sock_established
            If Getdstip(i) <> Ipcon Then                    ' the current client is different then the number stored
               Bauth = 0                                    ' reset authentication bit
            End If
            Tempw = Socketstat(i , Sel_recv)                ' get received bytes
            If Tempw > 0 Then                               ' if there is something received
               Bcmd = 0
               Do
                 Tempw = Tcpread(i , S)                     ' read a line
                 If Left(s , 3) = "GET" Then
                       Bcmd = 1                             ' GET /index.htm HTTP/1.1
                       Gosub Page
                                ' store current ip number
                       End If
                 End If
               Loop Until S = ""                            ' wait until we get an empty line

               #if Authenticate
                 If Bauth = 0 Then
                    Tempw = Tcpwrite(i , "HTTP/1.0 401 OK{013}{010}")       ' ask for user password
                    Tempw = Tcpwrite(i , "WWW-Authenticate: Basic realm={034}Ben{039}s HobbyCorner{034}{013}{010}")
                  Goto Continue
                 Else
                  Tempw = Tcpwrite(i , "HTTP/1.0 200 OK{013}{010}")
                 End If
               #else                                        ' no authentication used
                       Tempw = Tcpwrite(i , "HTTP/1.0 200 OK{013}{010}")       'send ok
               #endif
               Gosub Stuur                                  ' GET or HEAD or POST feedback so send it
Continue:

               Closesocket I                                ' close the connection
           '' End If
       Case Sock_close_wait
            Closesocket I                                   ' we need to close
       Case Sock_closed
            I = Getsocket(0 , Sock_stream , 80 , 0)         ' get a new socket
            Socketlisten I                                  ' listen
    End Select

Loop
End

'get html page out of data
Page:
   P1 = Instr(s , " ")                                      ' find first space
   P1 = P1 + 1                                              ' 4
   P2 = Instr(p1 , S , " ")                                 ' find second space
   P2 = P2 - P1
   Shtml = Mid(s , P1 , P2)                                 ' dont use too long page names
   Shtml = Lcase(shtml)                                     ' make lower case
Return


'send data
 Stuur:
   Bgenerate = 1                                            ' by default
 '  If Shtml = "/index.htm" Then
 '     Bgenerate = 1
 '  End If
   Tempw = Tcpwrite(i , "Content-Type: text/html{013}{010}")
   If Bgenerate = 0 Then
      S = "Content-Length: 121{013}{010}"
      Tempw = Tcpwritestr(i , S , 255)                      ' add additional CR and LF
      S = "<html><head><title>Easy TCP/IP</title></head><body.<p><b>Page not found</p></body></html>"
      Tempw = Tcpwritestr(i , S , 255)                      ' write data
   Else                                                     ' we generate the data
      Incr Ihitcounter                                      'increase hitcounter
      ' count the total characters for Content-Length
      Restore Dta1
      Wsize = 0
      Do
      Read S
      Wsize = Wsize + Len(s)
      Loop Until S = "End"
      Hits = Str(ihitcounter)
      Wsize = Wsize + Len(hits)

      Sheader = "Content-Length: " + Str(wsize) + "{013}{010}"
      Tempw = Tcpwritestr(i , Sheader , 255)
      Restore Dta1
      Do
      Read S
      If S = "Embedded webserver<br>Hits: " Then
         S = S + Hits
      End If
      Tempw = Tcpwritestr(i , S , 255)                      ' was 0
      Loop Until S = "End"
   End If
Return

' html-code
Dta1:

data "<!DOCTYPE HTML PUBLIC ",&H22,"-//W3C//DTD HTML 4.0 Transitional//EN",&H22,">"
data "<HTML>"
data "<HEAD>"
data "        <META HTTP-EQUIV=",&H22,"CONTENT-TYPE",&H22," CONTENT=",&H22,"text/html; charset=windows-1250",&H22,">"
data "        <TITLE></TITLE>"
data "        <META NAME=",&H22,"GENERATOR",&H22," CONTENT=",&H22,"LibreOffice 4.0.5.2 (Windows)",&H22,">"
data "        <META NAME=",&H22,"CREATED",&H22," CONTENT=",&H22,"20131116;22281418",&H22,">"
data "        <META NAME=",&H22,"CHANGED",&H22," CONTENT=",&H22,"20131116;22492472",&H22,">"
data "</HEAD>"
data "<BODY LANG=",&H22,"sk-SK",&H22," DIR=",&H22,"LTR",&H22,">"
data "<P><FONT COLOR=",&H22,"#ff0000",&H22,">WELCOME</FONT></P>"
data "<TABLE WIDTH=529 CELLPADDING=0 CELLSPACING=1 STYLE=",&H22,"page-break-inside: avoid",&H22,">"
data "        <COL WIDTH=74>"
data "        <COL WIDTH=75>"
data "        <COL WIDTH=75>"
data "        <COL WIDTH=75>"
data "        <COL WIDTH=75>"
data "        <COL WIDTH=75>"
data "        <COL WIDTH=73>"
data "        <TR VALIGN=TOP>"
data "                <TD WIDTH=74 STYLE=",&H22,"border-top: 1.05pt double #008000; border-bottom: 1.05pt double #008000; border-left: 1.05pt double #008000; border-right: none; padding-top: 0.05cm; padding-bottom: 0.05cm; padding-left: 0.05cm; padding-right: 0cm",&H22,">"
data "                        <P ALIGN=CENTER>Test</P>"
data "                </TD>"
data "                <TD WIDTH=75 STYLE=",&H22,"border-top: 1.05pt double #008000; border-bottom: 1.05pt double #008000; border-left: 1.05pt double #008000; border-right: none; padding-top: 0.05cm; padding-bottom: 0.05cm; padding-left: 0.05cm; padding-right: 0cm",&H22,">"
data "                        <P ALIGN=CENTER>Test</P>"
data "                </TD>"
data "                <TD WIDTH=75 STYLE=",&H22,"border-top: 1.05pt double #008000; border-bottom: 1.05pt double #008000; border-left: 1.05pt double #008000; border-right: none; padding-top: 0.05cm; padding-bottom: 0.05cm; padding-left: 0.05cm; padding-right: 0cm",&H22,">"
data "                        <P ALIGN=CENTER>Test</P>"
data "                </TD>"
data "                <TD WIDTH=75 STYLE=",&H22,"border-top: 1.05pt double #008000; border-bottom: 1.05pt double #008000; border-left: 1.05pt double #008000; border-right: none; padding-top: 0.05cm; padding-bottom: 0.05cm; padding-left: 0.05cm; padding-right: 0cm",&H22,">"
data "                        <P ALIGN=CENTER>Test</P>"
data "                </TD>"
data "                <TD WIDTH=75 STYLE=",&H22,"border-top: 1.05pt double #008000; border-bottom: 1.05pt double #008000; border-left: 1.05pt double #008000; border-right: none; padding-top: 0.05cm; padding-bottom: 0.05cm; padding-left: 0.05cm; padding-right: 0cm",&H22,">"
data "                        <P ALIGN=CENTER>Test</P>"
data "                </TD>"
data "                <TD WIDTH=75 STYLE=",&H22,"border-top: 1.05pt double #008000; border-bottom: 1.05pt double #008000; border-left: 1.05pt double #008000; border-right: none; padding-top: 0.05cm; padding-bottom: 0.05cm; padding-left: 0.05cm; padding-right: 0cm",&H22,">"
data "                        <P ALIGN=CENTER>Test</P>"
data "                </TD>"
data "                <TD WIDTH=73 STYLE=",&H22,"border: 1.05pt double #008000; padding: 0.05cm",&H22,">"
data "                        <P ALIGN=CENTER>Test</P>"
data "                </TD>"
data "        </TR>"
data "        <TR VALIGN=TOP>"
data "                <TD WIDTH=74 STYLE=",&H22,"border-top: none; border-bottom: 1.05pt double #008000; border-left: 1.05pt double #008000; border-right: none; padding-top: 0cm; padding-bottom: 0.05cm; padding-left: 0.05cm; padding-right: 0cm",&H22,">"
data "                        <P ALIGN=CENTER>Test</P>"
data "                </TD>"
data "                <TD WIDTH=75 STYLE=",&H22,"border-top: none; border-bottom: 1.05pt double #008000; border-left: 1.05pt double #008000; border-right: none; padding-top: 0cm; padding-bottom: 0.05cm; padding-left: 0.05cm; padding-right: 0cm",&H22,">"
data "                        <P ALIGN=CENTER>Test</P>"
data "                </TD>"
data "                <TD WIDTH=75 STYLE=",&H22,"border-top: none; border-bottom: 1.05pt double #008000; border-left: 1.05pt double #008000; border-right: none; padding-top: 0cm; padding-bottom: 0.05cm; padding-left: 0.05cm; padding-right: 0cm",&H22,">"
data "                        <P ALIGN=CENTER>Test</P>"
data "                </TD>"
data "                <TD WIDTH=75 STYLE=",&H22,"border-top: none; border-bottom: 1.05pt double #008000; border-left: 1.05pt double #008000; border-right: none; padding-top: 0cm; padding-bottom: 0.05cm; padding-left: 0.05cm; padding-right: 0cm",&H22,">"
data "                        <P ALIGN=CENTER>Test</P>"
data "                </TD>"
data "                <TD WIDTH=75 STYLE=",&H22,"border-top: none; border-bottom: 1.05pt double #008000; border-left: 1.05pt double #008000; border-right: none; padding-top: 0cm; padding-bottom: 0.05cm; padding-left: 0.05cm; padding-right: 0cm",&H22,">"
data "                        <P ALIGN=CENTER>Test</P>"
data "                </TD>"
data "                <TD WIDTH=75 STYLE=",&H22,"border-top: none; border-bottom: 1.05pt double #008000; border-left: 1.05pt double #008000; border-right: none; padding-top: 0cm; padding-bottom: 0.05cm; padding-left: 0.05cm; padding-right: 0cm",&H22,">"
data "                        <P ALIGN=CENTER>Test</P>"
data "                </TD>"
data "                <TD WIDTH=73 STYLE=",&H22,"border-top: none; border-bottom: 1.05pt double #008000; border-left: 1.05pt double #008000; border-right: 1.05pt double #008000; padding-top: 0cm; padding-bottom: 0.05cm; padding-left: 0.05cm; padding-right: 0.05cm",&H22,">"
data "                        <P ALIGN=CENTER>Test</P>"
data "                </TD>"
data "        </TR>"
data "        <TR VALIGN=TOP>"
data "                <TD WIDTH=74 STYLE=",&H22,"border-top: none; border-bottom: 1.05pt double #008000; border-left: 1.05pt double #008000; border-right: none; padding-top: 0cm; padding-bottom: 0.05cm; padding-left: 0.05cm; padding-right: 0cm",&H22,">"
data "                        <P ALIGN=CENTER>Test</P>"
data "                </TD>"
data "                <TD WIDTH=75 STYLE=",&H22,"border-top: none; border-bottom: 1.05pt double #008000; border-left: 1.05pt double #008000; border-right: none; padding-top: 0cm; padding-bottom: 0.05cm; padding-left: 0.05cm; padding-right: 0cm",&H22,">"
data "                        <P ALIGN=CENTER>Test</P>"
data "                </TD>"
data "                <TD WIDTH=75 STYLE=",&H22,"border-top: none; border-bottom: 1.05pt double #008000; border-left: 1.05pt double #008000; border-right: none; padding-top: 0cm; padding-bottom: 0.05cm; padding-left: 0.05cm; padding-right: 0cm",&H22,">"
data "                        <P ALIGN=CENTER>Test</P>"
data "                </TD>"
data "                <TD WIDTH=75 STYLE=",&H22,"border-top: none; border-bottom: 1.05pt double #008000; border-left: 1.05pt double #008000; border-right: none; padding-top: 0cm; padding-bottom: 0.05cm; padding-left: 0.05cm; padding-right: 0cm",&H22,">"
data "                        <P ALIGN=CENTER>Test</P>"
data "                </TD>"
data "                <TD WIDTH=75 STYLE=",&H22,"border-top: none; border-bottom: 1.05pt double #008000; border-left: 1.05pt double #008000; border-right: none; padding-top: 0cm; padding-bottom: 0.05cm; padding-left: 0.05cm; padding-right: 0cm",&H22,">"
data "                        <P ALIGN=CENTER>Test</P>"
data "                </TD>"
data "                <TD WIDTH=75 STYLE=",&H22,"border-top: none; border-bottom: 1.05pt double #008000; border-left: 1.05pt double #008000; border-right: none; padding-top: 0cm; padding-bottom: 0.05cm; padding-left: 0.05cm; padding-right: 0cm",&H22,">"
data "                        <P ALIGN=CENTER>Test</P>"
data "                </TD>"
data "                <TD WIDTH=73 STYLE=",&H22,"border-top: none; border-bottom: 1.05pt double #008000; border-left: 1.05pt double #008000; border-right: 1.05pt double #008000; padding-top: 0cm; padding-bottom: 0.05cm; padding-left: 0.05cm; padding-right: 0.05cm",&H22,">"
data "                        <P ALIGN=CENTER>Test</P>"
data "                </TD>"
data "        </TR>"
data "        <TR VALIGN=TOP>"
data "                <TD WIDTH=74 STYLE=",&H22,"border-top: none; border-bottom: 1.05pt double #008000; border-left: 1.05pt double #008000; border-right: none; padding-top: 0cm; padding-bottom: 0.05cm; padding-left: 0.05cm; padding-right: 0cm",&H22,">"
data "                        <P ALIGN=CENTER>Test</P>"
data "                </TD>"
data "                <TD WIDTH=75 STYLE=",&H22,"border-top: none; border-bottom: 1.05pt double #008000; border-left: 1.05pt double #008000; border-right: none; padding-top: 0cm; padding-bottom: 0.05cm; padding-left: 0.05cm; padding-right: 0cm",&H22,">"
data "                        <P ALIGN=CENTER>Test</P>"
data "                </TD>"
data "                <TD WIDTH=75 STYLE=",&H22,"border-top: none; border-bottom: 1.05pt double #008000; border-left: 1.05pt double #008000; border-right: none; padding-top: 0cm; padding-bottom: 0.05cm; padding-left: 0.05cm; padding-right: 0cm",&H22,">"
data "                        <P ALIGN=CENTER>Test</P>"
data "                </TD>"
data "                <TD WIDTH=75 STYLE=",&H22,"border-top: none; border-bottom: 1.05pt double #008000; border-left: 1.05pt double #008000; border-right: none; padding-top: 0cm; padding-bottom: 0.05cm; padding-left: 0.05cm; padding-right: 0cm",&H22,">"
data "                        <P ALIGN=CENTER>Test</P>"
data "                </TD>"
data "                <TD WIDTH=75 STYLE=",&H22,"border-top: none; border-bottom: 1.05pt double #008000; border-left: 1.05pt double #008000; border-right: none; padding-top: 0cm; padding-bottom: 0.05cm; padding-left: 0.05cm; padding-right: 0cm",&H22,">"
data "                        <P ALIGN=CENTER>Test</P>"
data "                </TD>"
data "                <TD WIDTH=75 STYLE=",&H22,"border-top: none; border-bottom: 1.05pt double #008000; border-left: 1.05pt double #008000; border-right: none; padding-top: 0cm; padding-bottom: 0.05cm; padding-left: 0.05cm; padding-right: 0cm",&H22,">"
data "                        <P ALIGN=CENTER>Test</P>"
data "                </TD>"
data "                <TD WIDTH=73 STYLE=",&H22,"border-top: none; border-bottom: 1.05pt double #008000; border-left: 1.05pt double #008000; border-right: 1.05pt double #008000; padding-top: 0cm; padding-bottom: 0.05cm; padding-left: 0.05cm; padding-right: 0.05cm",&H22,">"
data "                        <P ALIGN=CENTER>Test</P>"
data "                </TD>"
data "        </TR>"
data "</TABLE>"
data "<H1><FONT COLOR=",&H22,"#280099",&H22,">WELCOME</FONT></H1>"
data "</BODY>"
data "</HTML>"
Data "End"
 
Back to top
View user's profile
Paulvk

Bascom Member



Joined: 28 Jul 2006
Posts: 1257
Location: SYDNEY

australia.gif
PostPosted: Sun Nov 17, 2013 10:00 am    Post subject: Reply with quote

Hello bibibo


If you have a look at my web server code in the blog section you will see a way to minimize the HTML code in the flash you only need one line of test boxes I show how to dynamically build web pages from basic elements as needed. But I resorted to using a text editor to write it all by hand as it never came out correct using various editors. They all added unnecessary code and missed some things I used Firefox Web developer tools to find errors then fixed them in a text editor.

Regards Paul
Back to top
View user's profile
bibibo

Bascom Member



Joined: 30 Nov 2009
Posts: 168

slovakia.gif
PostPosted: Mon Nov 18, 2013 1:42 pm    Post subject: Reply with quote

Hello Paulvk, maybe I do not understand. Which blog section do you mean ?
Back to top
View user's profile
six1

Bascom Expert



Joined: 27 Feb 2009
Posts: 553

germany.gif
PostPosted: Mon Nov 18, 2013 6:44 pm    Post subject: Reply with quote

Hi bibibo,
have a look at this line:

data " <TD WIDTH=75 STYLE=",&H22,"border-top: none; b....

do you see your fault? (i've marked it bold style!)

inside the " you have to write a " as {034} !

in above sample it has to be:

data " <TD WIDTH=75 STYLE={034},&H22,"border-top: none; b....

best, michael

_________________
For technical reasons, the signature is on the back of this message.
Back to top
View user's profile
bibibo

Bascom Member



Joined: 30 Nov 2009
Posts: 168

slovakia.gif
PostPosted: Mon Nov 18, 2013 9:33 pm    Post subject: Reply with quote

Hi Michael,

It is output from application HTMLtoBascom.

Are you sure this line is correct ? I cannot compile it.
Code:

<TD WIDTH=75 STYLE={034}&H22,"border-top: none; border-bottom: 1.05pt double #008000; border-left: 1.05pt double #008000; border-right: none; padding-top: 0cm; padding-bottom: 0.05cm; padding-left: 0.05cm; padding-right: 0cm{034}&H22,">"
Back to top
View user's profile
Paulvk

Bascom Member



Joined: 28 Jul 2006
Posts: 1257
Location: SYDNEY

australia.gif
PostPosted: Mon Nov 18, 2013 10:55 pm    Post subject: Reply with quote

"Bascom Project Blog" on this forum ENC28J60 + AVR web server. http://www.mcselec.com/index2.php?option=com_forum&Itemid=59&page=viewforum&f=19

The boxes you are creating with the HTML I have already done plus a menu system. With not much more HTML code than you have. I have nearly 70 different forms being displayed with input boxes, check boxes, text boxes with hyperlinks, buttons and much more.

Regards Paul
Back to top
View user's profile
six1

Bascom Expert



Joined: 27 Feb 2009
Posts: 553

germany.gif
PostPosted: Tue Nov 19, 2013 6:43 am    Post subject: Reply with quote

try my "Converter.exe" to convert HTML to Data Lines ( or vis versa)...

This: ",&H22," is absolut wrong! it has to be: {034}

_________________
For technical reasons, the signature is on the back of this message.
Back to top
View user's profile
smatjaz

Bascom Member



Joined: 28 Jun 2004
Posts: 62

slovenia.gif
PostPosted: Tue Nov 19, 2013 7:42 pm    Post subject: Reply with quote

six1 wrote:
try my "Converter.exe" to convert HTML to Data Lines ( or vis versa)...

This: ",&H22," is absolut wrong! it has to be: {034}



How to convert data from Dataline back to HTML?

Best regards.

M.
Back to top
View user's profile
bibibo

Bascom Member



Joined: 30 Nov 2009
Posts: 168

slovakia.gif
PostPosted: Tue Nov 19, 2013 7:43 pm    Post subject: Reply with quote

Hi guys, Thanks a lot for converter and Paulvk's examples.
Back to top
View user's profile
bibibo

Bascom Member



Joined: 30 Nov 2009
Posts: 168

slovakia.gif
PostPosted: Fri Mar 21, 2014 7:14 pm    Post subject: Reply with quote

Hi guys, I have still problem with my code. The last table of my code does not displayed in web browser. Probably there is a problem with the variable wsize but i do not know how fix it.

Next question, How can i add value of the variable New_name to first table of my code ( there is text Remote Relay Control). I would like something like Remote Relay Control Relay-1
Back to top
View user's profile
bibibo

Bascom Member



Joined: 30 Nov 2009
Posts: 168

slovakia.gif
PostPosted: Sun Mar 30, 2014 11:04 am    Post subject: Reply with quote

Hi, my the second question was resolved but i still have a problem with displaying all HTML code in a web browser. The last table is not displayed. If i add number 200 to variable wsize then everything is ok. I do not understand why the variable wsize is not counted correct automaticly.
Back to top
View user's profile
Display posts from previous:   
Post new topic   Reply to topic    www.mcselec.com Forum Index -> EASY TCP/IP All times are GMT + 1 Hour
Page 1 of 1

 
Jump to:  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
You cannot attach files in this forum
You cannot download files in this forum