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 Sun 19 Apr 2015, 15:21
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 [70 Posts]   Goto page: Previous 1, 2, 3, 4, 5
Author Message
Ted Dog


Joined: 13 Sep 2005
Posts: 3150
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: 4493

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: 889

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   508 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  161 Time(s) 
Back to top
View user's profile Send private message 
technosaurus


Joined: 18 May 2008
Posts: 4493

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: 4493

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: 4493

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   218 Time(s)

hello_world_table.png

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

hello_world_canvas.png


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


Joined: 18 May 2008
Posts: 4493

PostPosted: Mon 15 Dec 2014, 08:42    Post subject:  

Ok, I've already shown a lot of how-tos. How about some links for how-not-tos?

answers.com has got to be the worst website I have seen:
http://celebs.answers.com/movies/cast-of-the-goonies-then-and-now
The layout is atrocious, with top, right and left sides packed with garbage (I think there may be some kind of navigation menu in there somewhere, but there is no real way to distinguish it from more ads).
But that isn't the worst part: rather than putting the _actual_content_ into a scrollable div so that the browser only hast to re-render that portion, they use floating css so the browser has to re-render everything on every single scroll

cnet.com ... I won't even post a click-able link to it. It runs so much garbage in the background that my CPU almost overheats. It auto-redirects to so many pages that the page you navigated from may not even show up in your drop down history list ... and navigating to the last in the list just increases its size so you have to type a new address into the nav bar just to leave. They don't keep permalinks to any articles so there is only a slim chance that anything linking there will actually still be there. ... on the plus side, a year or so ago their page layouts were as bad as answers.com

And just to give an example of an open source project that has a horrible UI: https://launchpad.net/ Have fun trying to navigate that mess. Everything is spread out such that it is difficult to find what you are looking for unless you are a speed
reader.

The best commentary I fount was at:
http://www.bypeople.com/great-websites-with-ugly-design/

But why reinvent the wheel:
http://www.webpagesthatsuck.com/[url]
http://www.globalwebfx.com/10-worst-websites-for-2013/[/url]

But by far the funniest examples:
http://www.theworldsworstwebsiteever.com/
http://www.everyfuckingwebsite.com/

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


Joined: 18 May 2008
Posts: 4493

PostPosted: Fri 27 Feb 2015, 05:31    Post subject:  

Maybe it is time to consider using a simple web interface for system configureation like: http://hg.slitaz.org/tazpanel

Though tazpanel is useful, the pages seem pretty scant for an entire webpage, so I threw together some code for adding "icons" and draggable "windows" to contain these tools. Each icon can open a separate webpage in an emulated window that supports minimize, maximize, closing and even dragging (no resizing yet)

This means that we can add the previous "menu" code to get a working desktop

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style>
body, iframe {background-color:#eee}
.ico {text-align:center;float:left;padding:8px;}
.win {left:25%;top:25%;border:solid 1px;position:absolute;}
.tbar {background-color:rgba(100,100,255,0.7);}
iframe{width:99%;height:100%;opacity:0.6;}
iframe:hover{opacity:1;}
</style>
<title></title>
</head>
<body id="bg" onselectstart="return !!0" ondragover="return dragging(event)" ondrop="return drop(event)" >
<script>
var dragObj={}, dragIcon = document.createElement('img'), zIndex=99;

function appendHTML(html){
   document.getElementsByTagName('body')[0].innerHTML+=html;
}

function drag(n,ev){
   dragObj.n=n;
   dragObj.x=ev.pageX-parseInt(getComputedStyle(dragObj.n,null).getPropertyValue("left"),10);
   dragObj.y=ev.pageY-parseInt(getComputedStyle(dragObj.n,null).getPropertyValue("top"),10);
   ev.dataTransfer.setData('Text',n.id); //mozilla hack
   return !1;
}

function dragging(ev){
   if (dragObj.n){
      dragObj.n.style.left=ev.pageX-dragObj.x+"px";
      dragObj.n.style.top=ev.pageY-dragObj.y+"px";
   }
   return !1;
}

function drop(ev){
   if (dragObj.n.classList.contains('win')) raise(dragObj.n);
   dragObj.n=null;
   return !1;
}

function getDraggable(n){
   while (n && !n.draggable) n = n.parentNode;
   return n;
}

function maximize(n){
   var p=getDraggable(n), a=[['+','25%','auto'],['#','0%','100%']], i=(n.innerHTML == "#")?0:1;
   n.innerHTML=a[i][0];
   p.style.top=p.style.left=a[i][1];
   p.style.width=p.style.height=a[i][2];
}

function minimize(n){
   var p=getDraggable(n), a=[['&ndash;','block'],['#','none']], i=(n.innerHTML == "#")?0:1;
   n.innerHTML = a[i][0];
   p.querySelector("iframe").style.display = a[i][1];
   p.style.width=p.style.height="auto";
}

function raise(n){
   if (n.style.zIndex < zIndex) n.style.zIndex = ++zIndex + "";
}

function removeNode(n){
   n.parentNode.removeChild(n)
}

function removeDraggable(n){
   n=getDraggable(n);
   removeNode(n);
}

function newIcon(title,url,img){
   var html = '<div class="ico" onclick=\'newWin("' + title + '", "' +
   url + '")\'><img src="' + img + '" alt="' + title + '" /><br>' +
   title + '</div>'
   appendHTML(html);
}

function newWin(title,url){
   var html = '<div onclick="raise(this)" class="drag win" ' +
      'draggable="true" ondragstart="drag(this,event)">' +
      '<div class="tbar"> &nbsp; ' +
         '<button onclick="removeDraggable(this)">X</button>' +
         '<button onclick="maximize(this)">+</button>' +
         '<button onclick="minimize(this)">&ndash;</button>' +
         title + '&nbsp;' +
      '</div>' +
      '<iframe src="' + url + '" onmouseenter="raise(getDraggable(this))"></iframe>' +
   '</div>';
   appendHTML(html);
}

newIcon("Roadmap","roadmap.html","7.png");
newIcon("CSS","CSS.html","z1.png");

</script>
</body>
</html>

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


Joined: 18 May 2008
Posts: 4493

PostPosted: Thu 26 Mar 2015, 23:27    Post subject:  

I wanted a simple way to edit svg paths manually in real time without adding any cruft... started off with just a textarea and a setInterval, but then I wanted to use my mouse to figure out the corresponding viewport coordinate and add some of my predrawn paths ... and why not add a fill color. It isn't fabulous or pretty, but effective for my purpose - to assist in hand crafting the most efficient paths possible.

Here is my basic svg path editor:

Code:
<html>
<head>
<style>
   body, body *{padding:0px;margin:0px;}
   table{table-layout:fixed;height:100%;width:100%}
   td{height:100%;width:50%}
   td div{float:left}
   textarea{height:90%;width:100%;}
   path:hover{stroke-width:1px;stroke:red}
</style>
</head>
<body>
<table>
<tr>
<td>
   <div onclick="addPath()">
   <svg id="thumb" title="click to append" width="24px" height="24px" viewBox="0 0 8 8">
      <path d="M0 4H8L4 8z"/>
   </svg>
   </div>
   path: <select id="select" onchange="setThumb()" ></select>
   color: <input id="color" onchange="setThumb()" type="color" ></input>
   pos: <b id="pos"></b>
   <textarea name="raw" oninput="setSVG()" id="raw"><path d="M0 4A4 4 0 1 0 8 4A4 4 0 1 0 0 4"/></textarea>
</td>
<td onmousemove="showpos(this,event)" onclick="setpos(this,event)">
   <svg title="tooltip" id="svg" width="100%" height="100%" viewBox="0 0 8 8" />
</td></tr>
</table>

<script>
   var last,raw=document.getElementById("raw"),
      svg=document.getElementById("svg"),
      select=document.getElementById("select"),
      thumb=document.getElementById("thumb"),
      color=document.getElementById("color"),
   viewbox = svg.getAttribute("viewBox").split(" "),
   vbstyle=getComputedStyle(svg,null),
   vbw=parseInt(vbstyle.getPropertyValue("width"),10)/viewbox[2],
   vbh=parseInt(vbstyle.getPropertyValue("height"),10)/viewbox[3],
   paths= {
"bottom-down-arrow":"0 4H8L4 8",
"bottom-up-arrow":"0 8H8L4 4",
"building-coffin":"0 4V5L5 6L7 5V4L5 3",
"checkered":"0 0H4V4H8V8H4V4H0",
"circle-large":"0 4A4 4 0 1 0 8 4A4 4 0 1 0 0 4",
"circle-med":"1 4A3 3 0 1 0 7 4A3 3 0 1 0 1 4",
"circle-small":"2 4A2 2 0 1 0 6 4A2 2 0 1 0 2 4",
"circle-tiny":"3 4A1 1 0 1 0 5 4A1 1 0 1 0 3 4",
"close":"0 1L3 4 0 7 1 8 4 5 7 8 8 7 5 4 8 1 7 0 4 3 1 0",
"close-medium":"1 2L2 1 4 3 6 1 7 2 5 4 7 6 6 7 4 5 2 7 1 6 3 4",
"club":"4 4A1 1 0 1 1 3 3A1.1 1 0 1 1 5 3A1 1 0 1 1 4 4Q4 6 5 6H3Q4 6 4 4",
"cone-pointed":"1 6A3 2 0 1 0 6 0L4 0",
"cone-rounded":"0 6A4 2 0 1 0 8 0L5 1A2 1 0 0 0 -2 0",
"crescent":"7 2A4 4 40 1 0 7 6A3 3 0 1 1 7 2",
"curved-paper":"0 1A4 1 0 1 1 8 1V7A4 1 0 1 0 0 7",
"cylinder":"1 7A3 1 0 1 0 6 0V-6A3 1 0 0 0 -6 0",
"cylinder-2":"1 7A3 1 0 1 0 6 0V-7A3 1 0 0 1 -6 0",
"diagonal":"5 0H4L8 4V3ZM0 3V4L4 8H5",
"diamond":"2 4L4 7L6 4L4 1",
"down-arrow":"2 3H6L4 5",
"eject":"0 4H8L4 0ZM0 5V7H8V5",
"eject-medium":"2 4H6L4 2ZM2 5H6V6H2",
"fat-cylinder":"0 1A4 1 0 1 1 8 1V7A4 1 0 1 1 0 7",
"flag":"0 0H8V4H1V8H0",
"flag-waving":"0 1H1Q6 2 5 1T8 1V5Q5 4 5 5T1 5V8H0",
"forward":"0 0V8L4 4ZM4 0V8L8 4",
"heart":"4 7Q0 0 4 2Q8 0 4 7",
"home":"2 3V6H6V3L4 1",
"ice-cream":"4 8L3 4A2 2, 0, 1 1 5 4",
"left-arrow":"5 2V6L3 4",
"left-left-arrow":"4 0V8L0 4",
"left-right-arrow":"0 0V8L4 4",
"mug":"6 1A2 3 0 1 1 6 7V6A1 2 0 1 0 6 2V8H0V1",
"music-note":"2 6A2 1 1 1 0 3 7V2L6 1V0L2 1",
"pencil":"0 8L1 6 7 0 8 1 2 7",
"pencil-med":"1 7L2 5 6 1 7 2 3 6",
"phone":"4 0H3A2 4 0 1 0 4 8L3 6A1 2 0 1 1 3 2",
"pin":"0 8L2 2A3 2, 0, 1 1 7 4",
"pin2":"4 8L1 5A4 3 0 1 1 7 5",
"plane":"3 2A1 2 0 0 1 5 2A1 5 0 0 1 3 3M1 4V5L3 4V2ZM7 4V5L5 4V2",
"play":"2 1V7L6 4",
"pyramid-on-":"1 5V1A3 2 0 1 0 6 0V-1L4 6ZM4 0L8 4L4 5L0 4",
"rain-drop":"4 0L2 5A2.2 2 0 1 0 6 5",
"rain-drop-fat":"4 0L1 3A4 3, 0, 1 0 7 3",
"rain-drop-med":"4 1L3 4A1.2 2 0 1 0 5 4",
"rectangle":"0 0H8V8H0",
"reverse":"4 0V8L0 4ZM8 0V8L4 4",
"right-arrow":"3 2V8L5 4",
"right-left-arrow":"8 0V8L4 4",
"right-right-arrow":"4 0V8L8 4",
"round-key":"1 0A1 4 0 1 0 1 8H7A1 4 0 1 0 7 0",
"rounded-box":"0 1Q0 0 1 0H7Q8 0 8 1V7Q8 8 7 8H1Q0 8 0 7",
"short-hat":"2 6A3 1 0 1 0 6 6 2 1 0 1 0 2 6",
"spade":"4 5Q0 7 4 1Q8 7 4 5Q4 7 5 7H3Q4 7 4 5",
"speaker":"1 5H0V3H1L3 1V7",
"star":"4 0L7 8L0 3H8L1 8",
"star-medium":"4 1L6 7L1 3H7L2 7",
"stop":"2 2H6V6H2",
"top-down-arrow":"0 0H8L4 4",
"top-hat-big":"2 6A3 1 0 1 0 6 6V-4A2 1 0 1 0 2 2",
"top-hat-huge":"2 6A3 1 0 1 0 6 6V-5A2 1 0 1 0 2 1",
"top-hat-plain":"2 6A3 1 0 1 0 6 6V-2A2 1 0 1 0 2 4",
"top-hat-striped":"2 6A3 1 0 1 0 6 6 2 1 0 1 1 2 6M2 5A2 1 0 1 0 6 5V-2A2 1 0 1 0 2 3",
"top-hat-tall":"2 6A3 1 0 1 0 6 6V-3A2 1 0 1 0 2 3",
"top-up-arrow":"0 4H8L4 0",
"touch-bottom":"0 4A4 4 0 1 1 8 4V8H0",
"touch-left":"4 0A4 4 0 0 1 4 8H0V0",
"touch-right":"4 0A4 4 0 0 0 4 8H8V0",
"touch-top":"0 4A4 4 0 1 0 8 4V0H0",
"tree":"3 3H2L4 0L6 3H5L7 5H6L8 7H5V8H3V7H0L2 5H1",
"tree-med":"4 1L6 4H5L7 6H5V7H3V6H1L3 4H2",
"up-arrow":"2 5H6L4 3",
"vol-high":"6 1A1 3 0 0 1 6 7A2 4 0 0 0 6 1",
"vol-low":"4 3A1 1 0 0 1 4 5A4 2 0 0 0 4 3",
"vol-max":"7 0A1 4 0 0 1 7 8A1 3 0 0 0 7 0",
"vol-med":"5 2A1 2 0 0 1 5 6A2 3 0 0 0 5 2"
};

function setThumb(){
   var f = "",rgb=color.value;
   if (rgb != "#000000") f = 'fill="'+ rgb +'"'
   thumb.innerHTML = "\\"+"\n<" + "path " + f + ' d="M' + paths[select.value] + 'z"/>';
}

function addPath(){
   var f = "",rgb=color.value;
   if (rgb != "#000000") f = 'fill="'+ rgb +'"'
   raw.value += "\r\n<" + "path " + f + ' d="M' + paths[select.value] + 'z"/>';
   setSVG();
}

for (i in paths){
   var option = document.createElement("option");
   option.text=i;
   select.add(option);
}

function getVBpos(n,ev){
   var style=getComputedStyle(svg,null),
      w=parseInt(style.getPropertyValue("width"),10),
      h=parseInt(style.getPropertyValue("height"),10);
   return ((ev.pageX - n.offsetLeft)/vbw).toFixed(1) + "," + ((ev.pageY - n.offsetTop)/vbw).toFixed(1);

}

function setpos(n,ev){
   document.getElementById("pos").innerHTML=getVBpos(n,ev)
}

function showpos(n,ev){
   var title=getVBpos(n,ev);
   svg.setAttribute("title",title);
   svg.parentNode.setAttribute("title",title); //chrome doesn't do tooltip on svg
}

function setSVG(){
   if (last != raw.value){
      last=raw.value;
      svg.innerHTML=raw.value
   }
};
setSVG();
</script>
</body>
</html>
svgpathedit.png
 Description   
 Filesize   3.92 KB
 Viewed   83 Time(s)

svgpathedit.png


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

Joined: 20 May 2005
Posts: 2331
Location: near Woof (Germany) :-) Acer Laptop emachines 2 GB RAM AMD64. franco-/germanophone, +/- anglophone

PostPosted: Tue 31 Mar 2015, 18:01    Post subject:  

Hi technosaurus

technosaurus wrote:
Maybe it is time to consider using a simple web interface for system configureation like: http://hg.slitaz.org/tazpanel


as I am one of the most older Puppy users, I am also one of the most older SliTaz users. In case of SliTaz with very more interruptions because my PCs did often refuse to start with the graphic environment of SliTaz (but it was comparable with Puppy a very long time ago: I was not able to start the Puppy's version 1.2 .. 1.6 or 1.7 with the PC's that I did use at this time... No distribution was all the time usuable on all PC's!).

And I am using now the SliTaz 5version 5.0b2 since ab. a month.

it works perfect really (excepted devel tools; there is a contestation now on the SliTaz forum about this figure...).

my opinion on above figure that you find important;

- the panel is wonderfull, really
- a own little development of the SliTaz guy's did permit it
(TazWEB, a tiny webbrowser frontend with only 157 kB over webkit)
- SliTaz core with only a little more than 40 MB includes for this reason:
webkit,
tazweb, as well as, based on tazweb,
tazpanel, and based on tazpanel,
tazinstaller in graphic mode, as well as, as sweet lolly extra,
midori and midori
private mode, as both are also only an extension of webkit

but all that based on a (full figured):

- user friendly localhost

and that is really fantastic! this is also the base for a better tiny personal wiki,

tazwiki,

an adaptation of the French WiKis, different from didiwiki, as it is able to manage a lot of (not included) plugins and extensions.

all that offers the most little under the great Linux distros in about 40 MB, running in RAM as Puppy and remasterable so long you can squash the rootfs.gz...

SliTaz did success to avoid to become fat Rolling Eyes

(but did also reduce the number of buildin apps in the core. until SliTaz 4.0, SliTaz did offer 4 level of access:

without graphic mode, just able to run,
without graphic mode with all major tools build in for console mode use,
with graphic mode just X with all major tools for console mode,
and core, the same including a set of good applications.

The last versions before SliTaz 5.0 was based on the Russian dolls concept: The rootfs.gz was splitted in to parts startet the one after the other and corresponding to those 4 levels Idea ! to start frugal as Puppy does, you must concatenate the 4 parts after unsquash (see pls the French doc, only it explains explicitely how to do that as SliTaz was initially a French language distro made in Switzerland and other Francophone countries).

an example for the use of localhost?

I love to use the Xombrero browser as it is extremly small (ab. 350 kB over Webkit, installation in SliTaz is of course especially easy!) and secure: You don't need to actualize all the time some Mozilla...

but it did refuse to open my links pages on my hard disk Embarassed (only HTML pages, each especiallizes on a field as Forums, Press, Authorities, Health, etc.).

But, with the full figured localhost, no problem: a link on the documents in /var/web and it does not come any more from harddisk as file but from localhost (network!) using the usual network protocol http://xxx.html Idea

and the same thing is possible with, especially, sources files! this can give to a script oriented devel system a uncredible dimension:

the script work can read from far url (depository) as well as from local host url depending only of the actual content of a system variable! if you look in the SliTaz mirror, you will find for example this http://mirror.slitaz.org/iso/1.0/packages-1.0.iso with the size 270,3 MB. SliTaz 1.0 itself was 24,3 MB (and is also included in that iso) and the rest are all official packages created for SliTaz 1.0, same for Version 2.0 etc. actually, the SliTaz sources are all, also them for Version 1.0, available separatelly on http://mirror.slitaz.org/sources/ but it would be possible to distribute them also as iso-archive with a full figured devel environment for that version with or without X (at actually 40 MB for X core full figured, hm, no question... compiler etc are about the same with or without X and no need of geany. tradionally SliTaz did develope using nano allthough the pair vim / gvim would be really better) and you can archive the sources as stable sources.iso set as well as dailly iso set and reduce the internet use for the participants.

that is my opinion on those marvellous developements included by Slitaz in her small iso and the possibilities offered by same; installation with the webpanel is super luxus, of course, but not as flexible as following the SliTaz doc: deligth please this page http://doc.slitaz.org/en:guides:uncommoninst (you will probably no find on all the web an other page with such good infos about uncommon installation's ideas!)

or that book http://doc.slitaz.org/en:scratchbook:start (this is the second version!)

as you can see on those wiki page all countries of world are invited to develope and the central wiki of the community includes a version control alarming automatic if a version of the page is not uptodate!

I hope my report can help you to access faster and easier to the hints of SliTaz Wink . good luck!
Back to top
View user's profile Send private message 
Display posts from previous:   Sort by:   
Page 5 of 5 [70 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.2033s ][ Queries: 13 (0.0078s) ][ GZIP on ]