Web Programming

For discussions about programming, programming questions/advice, and projects that don't really have anything to do with Puppy.
Message
Author
User avatar
Ted Dog
Posts: 3965
Joined: Wed 14 Sep 2005, 02:35
Location: Heart of Texas

#61 Post by Ted Dog »

marketing departments minor tax and shipping changes caused a total rewrite of business logic and shopping cart module.. :shock: 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.

User avatar
technosaurus
Posts: 4853
Joined: Mon 19 May 2008, 01:24
Location: Blue Springs, MO
Contact:

#62 Post by technosaurus »

I found free versions of windows images from microsoft for testing with IE
http://www.microsoft.com/en-us/download ... x?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
Check out my [url=https://github.com/technosaurus]github repositories[/url]. I may eventually get around to updating my [url=http://bashismal.blogspot.com]blogspot[/url].

seaside
Posts: 934
Joined: Thu 12 Apr 2007, 00:19

Form_db

#63 Post by seaside »

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: Select all

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: Select all

#!/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: Select all

#!/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  
Attachments
form_db.png
(15.95 KiB) Downloaded 935 times
jq.tar.gz
jq (json query) compiled and stripped
(94.74 KiB) Downloaded 456 times

User avatar
technosaurus
Posts: 4853
Joined: Mon 19 May 2008, 01:24
Location: Blue Springs, MO
Contact:

#64 Post by technosaurus »

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: Select all

<!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: Select all

#!/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
Check out my [url=https://github.com/technosaurus]github repositories[/url]. I may eventually get around to updating my [url=http://bashismal.blogspot.com]blogspot[/url].

User avatar
technosaurus
Posts: 4853
Joined: Mon 19 May 2008, 01:24
Location: Blue Springs, MO
Contact:

#65 Post by technosaurus »

working on bottom menus:

Code: Select all

<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 & 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>
Check out my [url=https://github.com/technosaurus]github repositories[/url]. I may eventually get around to updating my [url=http://bashismal.blogspot.com]blogspot[/url].

User avatar
technosaurus
Posts: 4853
Joined: Mon 19 May 2008, 01:24
Location: Blue Springs, MO
Contact:

sub pixel fonts in javascript

#66 Post by technosaurus »

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: Select all

<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.
Attachments
hello_world_table.png
using just tables and css properties
(160 Bytes) Downloaded 642 times
hello_world_canvas.png
html5 canvas version
(160 Bytes) Downloaded 637 times
Check out my [url=https://github.com/technosaurus]github repositories[/url]. I may eventually get around to updating my [url=http://bashismal.blogspot.com]blogspot[/url].

User avatar
technosaurus
Posts: 4853
Joined: Mon 19 May 2008, 01:24
Location: Blue Springs, MO
Contact:

#67 Post by technosaurus »

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-o ... en-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- ... ly-design/

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


But by far the funniest examples:
http://www.theworldsworstwebsiteever.com/
http://www.everyfuckingwebsite.com/
Check out my [url=https://github.com/technosaurus]github repositories[/url]. I may eventually get around to updating my [url=http://bashismal.blogspot.com]blogspot[/url].

User avatar
technosaurus
Posts: 4853
Joined: Mon 19 May 2008, 01:24
Location: Blue Springs, MO
Contact:

#68 Post by technosaurus »

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: Select all

<!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>
Check out my [url=https://github.com/technosaurus]github repositories[/url]. I may eventually get around to updating my [url=http://bashismal.blogspot.com]blogspot[/url].

User avatar
technosaurus
Posts: 4853
Joined: Mon 19 May 2008, 01:24
Location: Blue Springs, MO
Contact:

#69 Post by technosaurus »

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: Select all

<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>
Attachments
svgpathedit.png
(3.92 KiB) Downloaded 538 times
Check out my [url=https://github.com/technosaurus]github repositories[/url]. I may eventually get around to updating my [url=http://bashismal.blogspot.com]blogspot[/url].

oui

#70 Post by oui »

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

(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 :oops: (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!

kjdixo
Posts: 153
Joined: Sun 13 Sep 2009, 21:13

Sorttable

#71 Post by kjdixo »

RE. Web Programming

I found the following JavaScript by Stuart Langridge extremely interesting and I am sure that I will find a use for it someday.
While the web design community gradually moves away from using tables to lay out the structure of a page, tables really do have a vital use, their original use; they're for laying out tabular data . . .
SORTTABLE
http://kryogenix.org/code/browser/sorttable/

Then off-topic, does anyone currently use 'the abs Spreadsheet' with Puppy Linux?
http://home.scarlet.be/~pin01858/abs.html

User avatar
technosaurus
Posts: 4853
Joined: Mon 19 May 2008, 01:24
Location: Blue Springs, MO
Contact:

#72 Post by technosaurus »

In under an hour A web programmer would do a regex on tabular data into a JavaScript array then use it to generate a dynamic table, paste a generic one into a noscript tag and maybe tweak its style at least to fixed to speed up rendering

A web designer would still be cutting and pasting div tags for their layout and may finish days or weeks later depending on how many browsers they test it on
Check out my [url=https://github.com/technosaurus]github repositories[/url]. I may eventually get around to updating my [url=http://bashismal.blogspot.com]blogspot[/url].

kjdixo
Posts: 153
Joined: Sun 13 Sep 2009, 21:13

RE. Programmer / Designer / Whatever

#73 Post by kjdixo »

A web designer would still be cutting and pasting div tags for their layout and may finish days or weeks later depending on how many browsers they test it on
Thanks for that Technosaurus.

Sorry but did I post this in the wrong thread?
Any comments on sorttable please?
Regards

User avatar
technosaurus
Posts: 4853
Joined: Mon 19 May 2008, 01:24
Location: Blue Springs, MO
Contact:

#74 Post by technosaurus »

Sorry, I was away from home for a couple of weeks, couldn't check it out. Though sorttable looks fine, this is one area where I think its probably better for people to actually learn how to do it on their own, since it is pretty elementary to accomplish, but difficult to cover all different aspects of all tables (especially well formed ones with <caption>, <col> and/or <th> tags or different numbers of <td> tags)

Too many people have written off tables and end up doing 10X the work for 1/10th the performance using css and divs. Tables are actually really fast to render if they are "fixed". That's not to say that divs have no place in tables to increase render speeds; for example:

Code: Select all

<style>
td div{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    word-wrap: break-word;
    overflow: auto;
}
</style>
...
<td><div>
    If you put really long content in here it will automatically wrap and scroll
</div></td>
This allows the layout engine to know ahead of time the height and width of each table element before it is rendered (assuming they have been specified)
Check out my [url=https://github.com/technosaurus]github repositories[/url]. I may eventually get around to updating my [url=http://bashismal.blogspot.com]blogspot[/url].

kjdixo
Posts: 153
Joined: Sun 13 Sep 2009, 21:13

HTML Tables

#75 Post by kjdixo »

Useful tip Technosaurus, thanks.

Here is a basic intro to html tables.
http://css-tricks.com/complete-guide-table-element/
It also highlights some more advanced aspects and some gotchas (ie deprecated attributes).
Most of the commenters think it is a good article.

User avatar
Moose On The Loose
Posts: 965
Joined: Thu 24 Feb 2011, 14:54

Re: HTML Tables

#76 Post by Moose On The Loose »

kjdixo wrote:Useful tip Technosaurus, thanks.

Here is a basic intro to html tables.
http://css-tricks.com/complete-guide-table-element/
It also highlights some more advanced aspects and some gotchas (ie deprecated attributes).
Most of the commenters think it is a good article.
I tried and tried to get the positioning to work with CSS in the attached and finally just gave up and went back to using tables. The problem I think stems from a certain arrogance built into CSS where it thinks it knows better than I do about where things should appear. Tables are extremely modest in that they assume the Table Rows and Table Divs are arranged on a grid and exactly as specified by the web designer.

Yes, it is a silly game. I made it mostly to practice fiddling SVG on the fly.
Attachments
tangle.zip
(8.33 KiB) Downloaded 187 times

kjdixo
Posts: 153
Joined: Sun 13 Sep 2009, 21:13

#77 Post by kjdixo »

Moose On The Loose
Re. Tangle
Very inventive / ingenious that game (and code).
The first time I played the game I got interconnecting lines which I could untangle to win the game.
The above was what I expected.
I pressed the New Game button and then get only dots with no interconnecting lines.
I clicked some dots and they changed color.
So I have no lines to untangle . . . Am I missing something or do I have to imagine where the lines are?
I might have an incompatible browser setting.
Thanks

User avatar
L18L
Posts: 3479
Joined: Sat 19 Jun 2010, 18:56
Location: www.eussenheim.de/

Re: HTML Tables

#78 Post by L18L »

Moose On The Loose wrote:I tried and tried to get the positioning to work with CSS in the attached and finally just gave up and went back to using tables.
Try tableless version please
Attachments
tangle1.html.gz
remove .gz
(38.15 KiB) Downloaded 201 times

User avatar
Moose On The Loose
Posts: 965
Joined: Thu 24 Feb 2011, 14:54

Re: HTML Tables

#79 Post by Moose On The Loose »

L18L wrote:
Moose On The Loose wrote:I tried and tried to get the positioning to work with CSS in the attached and finally just gave up and went back to using tables.
Try tableless version please
The zip file appears corrupt

User avatar
Moose On The Loose
Posts: 965
Joined: Thu 24 Feb 2011, 14:54

#80 Post by Moose On The Loose »

kjdixo wrote:Moose On The Loose
Re. Tangle
Very inventive / ingenious that game (and code).
The first time I played the game I got interconnecting lines which I could untangle to win the game.
The above was what I expected.
I pressed the New Game button and then get only dots with no interconnecting lines.
I clicked some dots and they changed color.
So I have no lines to untangle . . . Am I missing something or do I have to imagine where the lines are?
I might have an incompatible browser setting.
Thanks
What web browser?

The new game should have more circles and a lot more lines

On Firefox, it works up to the point where I have well over 100 circles.

Post Reply