Då föddes en knasig idé: Varför inte använda vanliga html-tabeller för att göra en mätare med "analog" visare?
Fullständigt normalt, eller hur?
Jag tar en liten genomgång först, med de olika kodsegmenten.
Sist kommer en fullständig kod. Bara att kopiera och köra.
Först behöver vi något som definierar hur en pixel ska se ut när den är tänd, respektive släckt:
("Släckt" bör förstås motsvaras av bakgrundsfärgen.)
Det görs med vanlig css, här direkt i html-filen:
Kod: Markera allt
<style>
.on {background-color: #FF0000;}
.off {background-color: #EEEEEE;}
</style>Sedan själva Javascripten. Allt här nedan är i Javascript.
Vi måste först bestämma lite saker. T.ex hur stor rityta, storlek på pixeln, mm.
Det mesta är ganska tydligt, men inbjuder även till trial-and-error, så prova gärna andra värden.
Kod: Markera allt
//Settings
var resolution_x = 50;
var resolution_y = 20;
var pixel_size = 2;
var meter_length = 90;
var delay = 30;
var runstop_mode = 1; // 1 = run from start.
var move_run = 0; //Move-buttons from start?
//--------Sedan ska själva ytan skapas. Dvs tabellen. Det gör den här funktionen:
Kod: Markera allt
function create() //Create the tablespace.
{
var pos = 0;
var table_start = "<table id=graph border=0 cellspacing=0 cellpadding=0>";
var table_end = "</table>";
var tr_start = "<tr bgcolor=#EEEEEE>";
var tr_end = "</tr>";
var td_start = "<td width=" + pixel_size + " height=" + pixel_size + " ";
var td_end = "</td>";
document.write(table_start);
for (var r = resolution_y; r >= 1; r--)
{
document.write(tr_start);
for (var c = 1; c <= resolution_x; c++)
{
pos = 'a' + (((r - 1) * resolution_x) + c);
document.write(td_start + "id=" + pos + ">" + td_end);
}
}
document.write(table_end);
}Den här funktionen ritar en pixel på vald plats i tabellen:
Kod: Markera allt
function draw(x,y,pen) //Put or remove a pixel.
{
var set_pos = 'a' + (((y - 1) * resolution_x) + x);
var z_element = document.getElementById(set_pos);
z_element.className = pen;
}Mer behövs egentligen inte.
Allt ovan är alltså själva rit-grejen. Resten är funktioner som använder det.
----
Vad sägs om en studsande boll?
Kod: Markera allt
function tennis() //Bounce.
{
move_run = 1;
var cx = 1;
var cy = 1;
var direction_x = 1;
var direction_y = 1;
var cx_old = 0;
var cy_old = 0;
var pi = 3.14159;
(
function()
{
if (cx_old > 0) {draw(cx_old,cy_old,"off")}
draw(cx,cy,"on")
cx_old = cx;
cy_old = cy;
cx = cx + direction_x;
cy = cy + direction_y;
if (cx >= resolution_x) {direction_x = -direction_x;}
if (cx <= 1) {direction_x = -direction_x;}
if (cy >= resolution_y) {direction_y = -direction_y;}
if (cy <= 1) {direction_y = -direction_y;}
if (runstop_mode == 1) {setTimeout(arguments.callee, delay);}
}
)
();
}Nästa funktion är det som var min ursprungliga idé: En mätare med "analog" visare!
Kod: Markera allt
function meter(value_x)
{
var pi = 3.14;
var end_x = Math.round(resolution_x / 2);
var end_y = 0;
var cx = Math.round(value_x / 2);
var cy = Math.round(Math.sin((cx/resolution_x)*pi)*(0.3*resolution_x));
if (cy >= resolution_y) {cy = resolution_y;}
var cx_step = (cx - end_x) / meter_length;
var cy_step = (cy - end_y) / meter_length;
var meter_x = cx;
var meter_y = cy;
for (var temp_y = meter_y; temp_y >= 0; temp_y-=cy_step)
{
var meter_x = meter_x - cx_step;
draw(Math.round(meter_x), Math.round(temp_y), "on");
}
}Anropa med ett tal mellan 0-100. T.ex meter(50) för att få en nål som står rakt upp.
Tyvärr lider den sistnämnda funktionen av ett litet problem:
Man kan bara anropa den 1st gång. För ett nytt värde så måste man ladda om sidan.
Så det återstår att fixa.
Här är hela paketet, för fortsatta laborationer:
Kod: Markera allt
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style>
.on {background-color: #FF0000;}
.off {background-color: #EEEEEE;}
</style>
<script type="text/javascript">
//Settings
var resolution_x = 50;
var resolution_y = 20;
var pixel_size = 2;
var meter_length = 90;
var delay = 30;
var runstop_mode = 1; // 1 = run from start.
var move_run = 0; //Move-buttons from start?
//--------
function create() //Create the tablespace.
{
var pos = 0;
var table_start = "<table id=graph border=0 cellspacing=0 cellpadding=0>";
var table_end = "</table>";
var tr_start = "<tr bgcolor=#EEEEEE>";
var tr_end = "</tr>";
var td_start = "<td width=" + pixel_size + " height=" + pixel_size + " ";
var td_end = "</td>";
document.write(table_start);
for (var r = resolution_y; r >= 1; r--)
{
document.write(tr_start);
for (var c = 1; c <= resolution_x; c++)
{
pos = 'a' + (((r - 1) * resolution_x) + c);
document.write(td_start + "id=" + pos + ">" + td_end);
}
}
document.write(table_end);
}
function draw(x,y,pen) //Put or remove a pixel.
{
var set_pos = 'a' + (((y - 1) * resolution_x) + x);
var z_element = document.getElementById(set_pos);
z_element.className = pen;
}
function tennis() //Bounce.
{
move_run = 1;
var cx = 1;
var cy = 1;
var direction_x = 1;
var direction_y = 1;
var cx_old = 0;
var cy_old = 0;
var pi = 3.14159;
(
function()
{
if (cx_old > 0) {draw(cx_old,cy_old,"off")}
draw(cx,cy,"on")
cx_old = cx;
cy_old = cy;
cx = cx + direction_x;
cy = cy + direction_y;
if (cx >= resolution_x) {direction_x = -direction_x;}
if (cx <= 1) {direction_x = -direction_x;}
if (cy >= resolution_y) {direction_y = -direction_y;}
if (cy <= 1) {direction_y = -direction_y;}
if (runstop_mode == 1) {setTimeout(arguments.callee, delay);}
}
)
();
}
function scale()
{
var cx = 1;
var cy = 1;
var pi = 3.14159;
for (var cx = 1; cx <= resolution_x; cx++)
{
cy = Math.round(Math.sin((cx/resolution_x)*pi)*(0.3*resolution_x));
if (cy >= resolution_y) {cy = resolution_y;}
draw(cx,cy,"on")
}
}
function meter(value_x)
{
var pi = 3.14;
var end_x = Math.round(resolution_x / 2);
var end_y = 0;
var cx = Math.round(value_x / 2);
var cy = Math.round(Math.sin((cx/resolution_x)*pi)*(0.3*resolution_x));
if (cy >= resolution_y) {cy = resolution_y;}
var cx_step = (cx - end_x) / meter_length;
var cy_step = (cy - end_y) / meter_length;
var meter_x = cx;
var meter_y = cy;
for (var temp_y = meter_y; temp_y >= 0; temp_y-=cy_step)
{
var meter_x = meter_x - cx_step;
draw(Math.round(meter_x), Math.round(temp_y), "on");
}
}
function runstop(rs)
{
runstop_mode = rs;
}
</script>
</head>
<body>
<script type="text/javascript">
create()
tennis()
</script>
<script type="text/javascript">
if (move_run == 1)
{
document.write("<br><br><br><br>");
document.write('<input type="button" value="Run" onclick="runstop(1);move()">');
document.write('<input type="button" value="Stop" onclick="runstop(0)">');
}
</script>
</body>
</html>Den sista javascript-grejen är för att visa knapparna "Run" och "Stop", som används till tennis().
Ni får gärna använda vad ni vill och gärna modifiera efter önskemål.
Enda förbehållet är: Om ni kopierar något rakt av så får ni inte påstå att det är ni som gjort koden.
Glad påsk!
