Puppy Linux Discussion Forum Forum Index Puppy Linux Discussion Forum
Puppy HOME page : puppylinux.com
"THE" alternative forum : puppylinux.info
 
 FAQFAQ   SearchSearch   MemberlistMemberlist   UsergroupsUsergroups   RegisterRegister 
 ProfileProfile   Log in to check your private messagesLog in to check your private messages   Log inLog in 

The time now is Tue 23 Sep 2014, 18:37
All times are UTC - 4
 Forum index » Off-Topic Area » Programming
Web Programming
Post new topic   Reply to topic View previous topic :: View next topic
Page 5 of 5 [66 Posts]   Goto page: Previous 1, 2, 3, 4, 5
Author Message
Ted Dog


Joined: 13 Sep 2005
Posts: 2333
Location: Heart of Texas

PostPosted: Sat 04 Jan 2014, 10:02    Post subject:  

marketing departments minor tax and shipping changes caused a total rewrite of business logic and shopping cart module.. Shocked That they just appended it to an otherwise tiny by programing standards combo ( ALREADY HAD COMBO LOGIC ) combos are just another item code and picture of three items and new price.
Back to top
View user's profile Send private message 
technosaurus


Joined: 18 May 2008
Posts: 4351

PostPosted: Mon 20 Jan 2014, 22:12    Post subject:  

I found free versions of windows images from microsoft for testing with IE
http://www.microsoft.com/en-us/download/confirmation.aspx?id=11575

but the images are self extracting .exe so still need windows to create the image.
and probably this helper:
https://raw.github.com/xdissent/ievms/master/ievms.sh

_________________
Web Programming - Pet Packaging 100 & 101
Back to top
View user's profile Send private message 
seaside

Joined: 11 Apr 2007
Posts: 886

PostPosted: Sun 09 Feb 2014, 20:48    Post subject: Form_db
Subject description: Create and query html form json database
 

When technosaurus posted his nifty note-taking html server/client app, I found myself using it quite a bit. Recently it occurred to me that this idea could be expanded to include databases.....

A database seems somewhat complicated - decide on a schema, enter the structure, make up a form for data entry, set up a query operation.

Why not just make up an html form which actually creates and could also query a database?

So here is a simple prototype called "form_db".

Decide on your fields, grab some form html coding (lots of easy on-line form builders and templates available) and just paste the code into Form_db. Now you can just fill in the form and a json database is created and additional entries can be made. To query the database you could have several predefined buttons (each with a "case" statement) to return information based on fields. You could even make a text area to accept a complex query with JQ.

At first I thought I'd have to use Python or maybe Javascript to parse url and read/write json files. But then again, maybe all that could be done in bash and it turns out that it could (although probably lots easier in Python). Now that a Json database has been created, how might it be queried and used in this environment? I then discovered JQ, described as an awk/sed for json here-
http://stedolan.github.io/jq/

Next, how to show the json query return in the open html page?

Handily, there is a javascript widget to display json data. Good, everything we need.

Here's a simple contact form example with a single query button that returns all the contact names.

JQ has extensive ways to return information, including math expressions.

You'll find two scripts which go in $HOME/cgi-bin:
query_string # parses the url and directs action
form_db.cgi # browser form

Also attached is jq below which I compiled in Puppy Precise 5.4.3 and stripped - weighs in at only 247k

To set this up, do the following in a terminal:
Code:
mkdir $HOME/cgi-bin
cd $HOME
httpd


Install "jq.tar.gz" to /

Place the scripts "query_string" and "form_db.cgi" in $HOME/cgi-bin and make executable.

Then point your browser at url "localhost/cgi-bin/form_db.cgi"

Here's a pic (of course, you could add css styling to make this as decorative as you'd like)

Cheers,
s

Code:
#!/bin/sh
# place script in $HOME/cgi-bin/form_db.cgi
# called by browser "localhost/cgi-bin/form_db.cgi"
# seaside 2/9/2014
# form html code follows:

echo '
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<h2> Contacts </h2>
<form id="contacts-form" action="/cgi-bin/form_db.cgi">
<body bgcolor="#E6E6FA">
<label>First name:</label>
<div class="field"><input type="text" name="first_name" autofocus /></div>
<label>Last name:</label>
<div class="field"><input type="text" name="last_name" /></div>
<label>Email:</label>
<div class="field"><input type="text" name="email" /></div>
</div>
<input type="radio" name="gender" value="Male" checked> Male
<input type="radio" name="gender" value="Female"> Female
<div class="item button button-default"><br>
<div class="field"><input type="submit" id="contacts-op-save" value="Save" /></div>
<input type="submit" name="id_entry" value="Query All" />
</div>
</div>
</form>'

if [ "${QUERY_STRING/id_entry=Query}" = "${QUERY_STRING}" ] ; then
   ./query_string   #  submit item
else    # it's a query

input=`cat /root/cgi-bin/contact.json | jq -c '.'`
echo '<!DOCTYPE html>
<script src="http://metawidget.org/js/3.4/metawidget-core.min.js"></script>
<script type="text/javascript">
var body = '$input'
</script>
<div id="metawidget"></div>
<script type="text/javascript">
var mw = new metawidget.Metawidget( document.getElementById( "'metawidget'" ));
mw.toInspect = body;
mw.buildWidgets();
</script>
</html>'

fi

Code:
#!/bin/sh
# place script in $HOME/cgi-bin/query_string
# parses QUERY_STRING from form_db.cgi
# seaside 2/9/2014

[ -z "$QUERY_STRING" ] && exit

QUERY_STRING=$(echo -e $(sed -e 's/%/\\x/g' -e 's/+/ /g' <<<"$QUERY_STRING"))

if [ ! -f $HOME/cgi-bin/contact.json ]; then
   oldIFS=$IFS
   IFS="&"
   jstring='[{'
   for item in $QUERY_STRING; do
   key='"'${item%=*}'"'
   value='"'${item#*=}'"'
   jstring="$jstring $key:$value,";
   done
   IFS=$oldIFS
   
   jstring="${jstring%,}}]"  # cut comma, add }]
   echo "$jstring" >$HOME/cgi-bin/contact.json

else    # additional object

   json=`cat $HOME/cgi-bin/contact.json`
   json="${json%]},"    # cut ] add comma
   oldIFS=$IFS
   IFS="&"
   json_add='{'
   for item in $QUERY_STRING; do
   key='"'${item%=*}'"'
   value='"'${item#*=}'"'
   json_add="$json_add $key:$value,";
   done
   IFS=$oldIFS
   
   json_add="${json_add%,}}]"
   
   echo "$json$json_add" >$HOME/cgi-bin/contact.json


fi 
form_db.png
 Description   
 Filesize   15.95 KB
 Viewed   301 Time(s)

form_db.png

jq.tar.gz
Description  jq (json query) compiled and stripped
gz

 Download 
Filename  jq.tar.gz 
Filesize  94.74 KB 
Downloaded  74 Time(s) 
Back to top
View user's profile Send private message 
technosaurus


Joined: 18 May 2008
Posts: 4351

PostPosted: Wed 09 Jul 2014, 23:56    Post subject:  

I was thinking about how so many webpages have virtually 90% of the same content on every page and 10% is the actual content that changes... unfortunately bots don't evaluate javascript, so you have to use cached pages for the bots... here is a simple example
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html><head><meta name="fragment" content="!">
<title>bottester</title></head>
<body>menus and stuff here - no content<div id="content"><div></body><script>
var h=XMLHttpRequest();
u=window.location.toString().replace("#!","?_escaped_fragment_=")
try{ h['open']('GET',u,false);
   h['send']();
   if(h['status']!=404) document.getElementById("content")['innerHTML']=h['responseText'];
}catch(e){ alert("exception");}
</script></html>
and an example server using netcat (specifically busybox's nc)
##do not use this _as-is_, It is really unsafe #!../../etc/passwd
Code:
#!/bin/sh
nc -ll -p 80 -e sh -c '
while read A B DUMMY; do
   case "$A" in
   [Gg][Ee][Tt])
      case "$B" in
         *"?_escaped_fragment_="*)FILENAME=${B#*?_escaped_fragment_=};;
         *)FILENAME=index.html;;
      esac
      echo -e "HTTP/1.1 200 OK\r\nContent-Length: `stat -c %s ${FILENAME}`\r\n\r\n"
      cat ${FILENAME}
      break;;
   esac
done'
... so the contents will be loaded based on the #!filename.html
(it's contents will go int <div id="content">) because both the bot and our javascript access the content via the ?_escaped_fragment_= version and the #! simply tries to go to a marked spot on the page (which doesn't exist)

... next up navigation by our #!content links with an event handler

_________________
Web Programming - Pet Packaging 100 & 101
Back to top
View user's profile Send private message 
technosaurus


Joined: 18 May 2008
Posts: 4351

PostPosted: Sun 20 Jul 2014, 06:32    Post subject:  

working on bottom menus:
Code:
<style>
#menu{position:fixed;bottom:0;float:left;text-align:center;white-space:nowrap}
#menu *{color:#000;list-style-type:none;margin:0;padding:0}
#menu a{display:block;text-decoration:none;position:relative;transition:background-color .5s}
#menu li{background:#9a7;float:left;position:relative}
#menu ul li{font-weight:700;width:140px}
#menu>ul li a{padding-bottom:3px;width:140px}
#menu>ul>li>ul{bottom:0;z-index:1;transition:bottom .2s}
#menu ul li ul li{padding:3px;z-index:2}
#menu ul li ul li a:hover{border-left:solid 1px #000;background-color:rgba(222,222,222,.5)}
#menu ul li ul,#menu:hover ul li ul,#menu:hover ul li:hover ul li ul{position:absolute;visibility:hidden;width:140px}
#menu:hover ul,#menu:hover ul li:hover ul,#menu:hover ul li:hover ul li:hover ul{visibility:visible}
#menu:hover ul li:hover ul li:hover ul{margin-left:140px;margin-top:-48px;position:absolute}
#menu:hover ul li:hover ul{position:absolute}
#menu>ul>li:hover>ul{bottom:100%}
</style>
<div id="menu">
   <ul>
      <li>
         <a href="http://technosaurus.github.io">Menu</a>
         <ul>
            <li>
               <a href="#">Projects</a>
               <ul>
                  <li><a href="#">Amaya gtk1</a></li>
                  <li><a href="#" title="Shell scripts designed to show off jwm and make configuration easy.">Jwm Tools</a></li>
                  <li><a href="#" title="A small replacement C library for building minimized static apps.">Libc embedded</a></li>
                  <li><a href="#" title="A javascript library designed to be minimized by Google's Closure Compiler." >Liba.js</a></li>
                  <li><a href="#" title="A tiny public domain ogg player.">PDVorbis</a></li>
                  <li><a href="#">Pupngo</a></li>
                  <li><a href="#">Simple Icon Tray</a></li>
                  <li><a href="#">Web Desktop</a></li>
               </ul>
            </li>
            <li><a href="#">License</a></li>
            <li><a href="#">FAQ</a> </li>
            <li><a href="#">Disclaimer</a></li>
            <li><a href="#">About Me</a></li>
         </ul>
      </li>
      <li>
         <a href="#">Resources</a>
         <ul>
            <li><a href="#">Helpful Links</a></li>
            <li>
               <a href="#">Affiliates &rsaquo;</a>
               <ul>
                  <li><a href="#">X</a></li>
                  <li><a href="#">X</a></li>
               </ul>
            </li>
         </ul>
      </li>
      <li>
         <a href="#">News &amp; Events</a>
         <ul>
            <li><a href="#">Press Articles</a></li>
            <li><a href="#">Newsletter</a></li>
            <li><a href="#">Events</a></li>
            <li><a href="#">Blog</a></li>
         </ul>
      </li>
      <li>
         <a href="#">Espanol</a>
         <ul>
            <li><a href="#">X</a></li>
         </ul>
      </li>
   </ul>
</div>

_________________
Web Programming - Pet Packaging 100 & 101
Back to top
View user's profile Send private message 
technosaurus


Joined: 18 May 2008
Posts: 4351

PostPosted: Fri 08 Aug 2014, 22:58    Post subject: sub pixel fonts in javascript
Subject description: check it out and see if you can read it
 

I read an article on the smallest "readable" font (1px wide by 5px high) but I didn't like the rainbow colors, so I created a 2x5 sub-pixel font in javascript in a classic green on black terminal style color scheme - 1st method is html5 canvas, 2nd is using plain old tables with css
Code:
<html>
<head>
<style>
.cbox,tr,td {
   height:1px
   border-spacing:0px;
   line-height:1px;
    font-size:1px;
    padding:0px;
    margin:0px;
   border:0px;
   cellspacing:0px;
   cellpadding:0px;
   border-spacing: 0px;
   border-collapse:collapse !important;
}
canvas, table{display:block}
body{background-color:black}
td {width:1px;height:1px}
</style>
<title></title>
</head>
<body>
<div id="a"></div>
<div id="b"></div>
</body>

<script>
var glyphstiny={
'A':'0F0F0FFFFF0FF0F',
'B':'FF0F0FFF0F0FFF0',
'C':'0F0F0FF00F0F0F0',
'D':'FF0F0FF0FF0FFF0',
'E':'FFFF00FF0F00FFF',
'F':'FFFF00FF0F00F00',
'G':'0FFF00F7FF0F0F0',
'H':'F0FF0FFFFF0FF0F',
'I':'FFF0F00F00F0FFF',
'J':'FFF00F00FF0F0F0',
'K':'F0FF0FFF0F0FF0F',
'L':'F00F00F00F00FFF',
'M':'F0FFFFF0FF0FF0F',
'N':'F0FF7FFFFF7FF0F',
'O':'0F0F0FF0FF0F0F0',
'P':'FF0F0FFF0F00F00',
'Q':'0F0F0FF0FF7F0F7',
'R':'FF0F0FFF0F0FF0F',
'S':'0FFF0F0F000FFF0',
'T':'FFF0F00F00F00F0',
'U':'F0FF0FF0FF0FFFF',
'V':'F0FF0FF0F7F70F0',
'W':'F0FF0FF0FFFFF0F',
'X':'F0FF0F0F0F0FF0F',
'Y':'F0FF0F0F00F00F0',
'Z':'FFF00F0F0F00FFF',
'0':'0F0F0FF0FF0F0F0',
'1':'0F00F00F00F00F0',
'2':'0F0F0F00F0F0FFF',
'3':'FF000F0FF00FFF0',
'4':'F0FF0FFFF00F00F',
'5':'FFFF00FF000FFF0',
'6':'0F0F00FF0F0F0F0',
'7':'FFF00F0F0F00F00',
'8':'0F0F0F0F0F0F0F0',
'9':'0F0F0F0FF00F0F0',
' ':'000000000000000',
'_':'000000000000FFF',
'+':'0000F0FFF0F0000',
'-':'000000FFF000000',
'=':'000FFF000FFF000',
'>':'F000F000F0F0F00',
'<':'00F0F0F000F000F',
')':'0F000F00F00F0F0',
'(':'0F0F00F00F000F0',
'*':'FFF7F7FFF7F7FFF',
'&':'0FFF000F0F7F0F7',
'^':'0F0F0F000000000',
'$':'0FFFF00F70FFFF0',
'%':'F0F00F0F0F00F0F',
'"':'F0FF0F000000000',
'\'':'0F00F0000000000',
';':'0000F00000F0700',
':':'0000F00000F0000',
'/':'00F00F0F0F00F00',
'?':'0F0F0F00F0700F0',
'.':'0000000000F0000',
',':'0000000000F0700',
']':'FF00F00F00F0FF0',
'[':'0FF0F00F00F00FF',
'}':'F700F007F0F0F70',
'{':'07F0F0F700F007F',
'#':'F0FFFFF0FFFFF0F',
'@':'0F0F0FF7FF770F7',
'!':'0F00F00F00000F0',
'~':'F7007F000000000',
'`':'0F0007000000000',
}
var glyphsmedium={
'A':'00FF000F00F00FFFF00F00F00F00F0',
'B':'0FFF000F00F00FFF000F00F00FFF00',
'C':'00FF000F00F00F00000F00F000FF00',
'D':'0FFF000F00F00F00F00F00F00FFF00',
'E':'0FFFF00F00000FFF000F00000FFFF0',
'F':'0FFFF00F00000FFF000F00000F0000',
'G':'00FFF00F00000F0FF00F00F000FF00',
'H':'0F00F00F00F00FFFF00F00F00F00F0',
'I':'000FFF0000F00000F00000F0000FFF',
'J':'000FFF0000F00000F00F00F000FF00',
'K':'0F00F00F0F000FF0000F0F000F00F0',
'L':'0F00000F00000F00000F00000FFFF0',
'M':'0F00F00FFFF00F77F00F00F00F00F0',
'N':'0F00F00FF0F00F77F00F0FF00F00F0',
'O':'00FF000F00F00F00F00F00F000FF00',
'P':'0FFF000F00F00FFF000F00000F0000',
'Q':'00FF000F00F00F00F00F07F000FF07',
'R':'0FFF000F00F00FFF000F00F00F00F0',
'S':'00FFF00F000000FF000000F00FFF00',
'T':'0F77FF0000F00000F00000F00000F0',
'U':'0F00F00F00F00F00F00F00F000FF00',
'V':'0F00F00F00F00F00F007777000FF00',
'W':'0F00F00F00F00F77F00FFFF00F00F0',
'X':'0F00F00F00F000FF000F00F00F00F0',
'Y':'0F00F00F00F0007700007700007700',
'Z':'0FFFF00007F000FF000F70000FFFF0',
'0':'00FF000F00F07F77F70F00F000FF00',
'1':'0007F0000FF00000F00000F0000FFF',
'2':'00FF000F00F0000F0000F0F00FFFF0',
'3':'0FFF000000F000FF000000F00FFF00',
'4':'0F00F00F00F00FFFF00000F00000F0',
'5':'0FFFF00F00000FFF700000F00FFF70',
'6':'00FFF00F00000FFF000F00F000FF00',
'7':'0FFFF00F07F0007F700FF7000F7000',
'8':'07FF700F00F007FF700F00F007FF70',
'9':'07FF700F00F007FFF00000F00FFF70',
' ':'000000000000000000000000000000',
'_':'0000000000000000000000000FFFF0',
'+':'00000000FF000FFFF000FF00000000',
'-':'0000000000000FFFF0000000000000',
'=':'0000000FFFF00000000FFFF0000000',
'>':'0F00000077000000F00077000F0000',
'<':'0000F00077000F00000077000000F0',
')':'000F700007F00000F00007F0000F70',
'(':'07F0000F70000F00000F700007F000',
'*':'F0FF0F07FF70FFFFFF07FF70F0FF0F',
'&':'00FF000F00F000FF000F07F000FF0F',
'^':'0077000F00F0000000000000000000',
'$':'07FFF00F0F0000FFF0000F7F0FFFF0',
'%':'0F00F0000F0000770000F0000F00F0',
'"':'0F00F00F00F0000000000000000000',
'\'':'000000000000000000000000000000',
';':'0000000F00000000000F0000700000',
':':'0000000F00000000000F0000F70000',
'/':'0000F00007F000F0000F70000F0000',
'?':'07FFF00F00770000F00000000000F0',
'.':'0000000000000000000F0000000000',
',':'0000000000000000000F0000770000',
']':'000FF00000F00000F00000F0000FF0',
'[':'0FF0000F00000F00000F00000FF000',
'}':'0007F0000070000FFF0000700007F0',
'{':'0F7000070000FFF0000700000F7000',
'#':'0F00F07F77F70F00F07F77F70F00F0',
'@':'00FF700F00F00F77F00F777007FFF0',
'!':'0F00000F00000F00000000000F0000',
'~':'0000000F0F70F7F0F7000000000000',
'`':'0F0000077000000000000000000000',
}

var canvas,ctx,d,id,putPixel,glyphs;

function putPixelBox(x,y,r,g,b,a){
   ctx.fillStyle = "rgba("+r+","+g+","+b+","+(a/255)+")";
   ctx.fillRect(x,y,1,1); // fill in the pixel at (10,10)
}
function putPixelData(x,y,r,g,b,a){
   d[0]   = r;
   d[1]   = g;
   d[2]   = b;
   d[3]   = a;
   ctx.putImageData( id, x, y );
}

function tinyPrintCanvas(s){
   s=s.toUpperCase()
   var i,j,k,r,g,b,dx=4,dy=4,h=5+2*dy,fw=glyphs['0'].length/15|0,w=fw*(dx+s.length);
   canvas=document.createElement("canvas"); canvas.width=w; canvas.height=h;
   document.body.appendChild(canvas)
   ctx=canvas.getContext('2d');
   ctx.imageSmoothingEnabled = false;
   id=ctx.createImageData(1,1);
   d = id.data;
   ctx.fillRect(0,0,w,h);
   for (i=0;i<s.length;i++){
      for (j=0;j<5;j++){
         letter=s.substr(i,1);
         for (k=0;k<fw;k++){
            r=glyphs[letter].substr(j*6+k*3,1);
            g=glyphs[letter].substr(j*6+k*3+1,1);
            b=glyphs[letter].substr(j*6+k*3+2,1);
            putPixel( dx+i*fw+k, dy+j ,'0x'+r+r|0,'0x'+g+g|0,'0x'+b+b|0,199);
         }
      }
   }
}

function tinyPrintTable(s){
   s=s.toUpperCase()
   var tbl,tr=[],td,img,r,g,b,i,j,k,fw=glyphs['0'].length/15|0;
   tbl=document.createElement("table")
   tr[0]=document.createElement("tr")
   tr[1]=document.createElement("tr")
   tr[2]=document.createElement("tr")
   tr[3]=document.createElement("tr")
   tr[4]=document.createElement("tr")
   tbl.className="cbox"
   for (i=0;i<s.length;i++){
      for (j=0;j<5;j++){
         letter=s.substr(i,1)
         for (k=0;k<fw;k++){
            td=document.createElement("td")
            td.title=letter
            td.setAttribute("bgcolor","#"+  glyphs[letter].substr(j*6+k*3,3) );
            tr[j].appendChild(td)
         }
      }
   }
   for (i=0;i<5;i++)
      tbl.appendChild(tr[i])
   document.body.appendChild(tbl)
}

putPixel=putPixelBox
glyphs=glyphstiny;
tinyPrintCanvas("hello world")
tinyPrintTable("hello world")
</script>

It looks better when you run it than the screen shots show, the image loses quality and gets anti-aliased... but here is a (cruddy) shot anyhow.
hello_world_table.png
 Description   using just tables and css properties
 Filesize   160 Bytes
 Viewed   43 Time(s)

hello_world_table.png

hello_world_canvas.png
 Description   html5 canvas version
 Filesize   160 Bytes
 Viewed   41 Time(s)

hello_world_canvas.png


_________________
Web Programming - Pet Packaging 100 & 101
Back to top
View user's profile Send private message 
Display posts from previous:   Sort by:   
Page 5 of 5 [66 Posts]   Goto page: Previous 1, 2, 3, 4, 5
Post new topic   Reply to topic View previous topic :: View next topic
 Forum index » Off-Topic Area » Programming
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 can download files in this forum


Powered by phpBB © 2001, 2005 phpBB Group
[ Time: 0.1221s ][ Queries: 13 (0.0053s) ][ GZIP on ]