Skip to content

Instantly share code, notes, and snippets.

@polamjag

polamjag/marker.html

Created June 21, 2011 11:45
Show Gist options
  • Save polamjag/1037690 to your computer and use it in GitHub Desktop.
Save polamjag/1037690 to your computer and use it in GitHub Desktop.
Download ZIP
An easy tool to make an AR marker.
Raw
marker.html
<!DOCTYPE html>
<!--
marker creator for ARToolKit
interface html; version 2.1.5a
updated on 2011-07-23
developed by @polamjag (http://about.me/polamjag)
under GNU GPL v2.
-----
Generate marker with 4x4 blocks inside.
I'm sorry that i wrote comments in Japanese.
-->
<html>
<head>
<!-- Load core JavaScript file -->
<script src="marker.js"></script>
<style>
* {
font-family: "courier new", "consolas";
font-size: 12pt;
}
div {
margin: 0;
padding: 0;
}
#header {
width: 1024px;
height: 100px;
}
h1 {
font-size: 28pt;
float: left;
width: 512px;
position: absolute;
padding: 2px 0 0 .2em;
margin: 0;
}
#about {
position: absolute;
float: right;
margin: 40px 0 0 .3em;
}
#wrapper {
disply: block;
width: 1024px;
margin: 0 auto;
}
div#mat {
width: 1024px;
potition: relative;
display: block;
float: left;
}
table {
width: 400px;
height: 400px;
position: absolute;
display: block;
margin: -200px 0 0 -200px;
border-spacing: 0px;
top: 50%;
left: 50%
}
table * {
margin: 0;
padding: 0;
}
td {
width: 50px;
height: 50px;
border: none;
background-color: white;
text-indent: -9999em;
margin: 0;
padding: 0;
}
td.alb {
background-color: #000;
}
td.alb:hover {
border: none!important;
}
#dispPosSwitch {
position: relative;
float: right;
}
div#output {
display: none;
position: relative;
width: 512px;
float: right;
}
.button {
margin: 5px;
padding: 4px;
background-color: #000;
color: #fff;
border-radius: 2px;
border: 3px solid #444;
cursor: pointer;
}
.button:hover {
border: 3px solid #777;
background-color: #111;
}
.button:active {
border: 3px solid #222;
background-color: #444;
}
span#outputCaption {
font-size: 12px;
display: block;
margin: 4px 0 4px 0;
}
div#mainOutput {
display: block;
margin: 10px 0 0 0;
width: 500px;
height: 300px;
font-size: 10px;
overflow: scroll;
background-color: #ddd;
}
</style>
</head>
<body onmouseup="javascript:mouseState=0;">
<div id="wrapper">
<div id="header">
<h1>Marker Maker for ARTK</h1>
<div id="about">
developped by <a href="http://about.me/polamjag">@polamjag</a><br />
<!--[if IE]>* maybe on IE, each cells on table may have some margin. why?<endif]-->
</div>
<div id="tools">
<span id="dispPosSwitch" class="button" onclick="javascript:markerMatrix.changeDispState();">Enable Outputting Tool</span>
</div>
</div>
<div id="mat">
<script>
// call main function and draw marker table
markerMatrix.ready();
</script>
</div>
<div id="output">
<span id="outputSwitch" class="button" onclick="javascript:markerMatrix.output()">Click to output</span><br /><br />
Output (content of marker's pattern file):<br />
<span id="outputCaption">Copy and paste strings of this area into the pattern file.</span>
<!-- strings of marker's pattern file will be outputted div#mainOutput's innerHTML -->
<div id="mainOutput"></div>
</div>
</div>
</body>
</html>
Raw
marker.js
/*
marker creator for ARToolKit
Core js; version 2.1.5a
updated on 2011-07-23
developed by @polamjag (http://about.me/polamjag)
under GNU GPL v2.
-----
Generate marker with 4x4 blocks inside.
I'm sorry that i wrote some comments in Japanese.
*/
// 0: do nothing, 1: paint blocks black, 2: paint block white
var mouseState = 0;
// 0: only markers, 1: display outpytting tools
var dispState = 0;
// main namespace Object
var markerMatrix = {
// raw aray
raw: new Array(16),
// get index from coodinate
crd: function (x, y) {
return this.raw[(x + (y)*4)];
},
// rotated index (回転数(反時計回り), x co., y co.)
rotated: function (mode, x, y) {
if (mode === 0) {
return this.crd(x, y);
} else if (mode === 1) {
return this.crd(y, (3 - x));
} else if (mode === 2) {
return this.crd((3 - x), (3 - y));
} else if (mode === 3) {
return this.crd((3 - y), x);
}
},
// unused function, will be deleted
rotate: function (mode, x, y) {
if (mode === 0) {
return this.crd(x, y);
} else if (mode === 1) {
return this.crd((3 - y), x);
} else if (mode === 2) {
return this.crd((3 - x), (3 - y));
} else if (mode === 3) {
return this.crd(y, (3 - x));
}
},
// unused function, will be deleted
getFromTable: function () {
var tempIndex = 0;
for (i=0; i<4; i++) {
for (j=0; j<4; j++) {
this.raw[tempIndex] = document.getElementById("markerMatTable_"+j+"_"+i).getAttribute("cell_state");
tempIndex++;
}
}
return 0;
},
// output marker's setting strings
output: function () {
var temp;
resetMainOut();
for (i=0; i<4; i++) {// i: 向き
for (m=0; m<4; m++) {
for (j=0; j<4; j++) {// j: y co. index
for (l=0; l<4; l++) {
for (k=0; k<4; k++) {// k: x co. index
temp = this.retBin(markerMatrix.rotated(i, k, j));
mainOut(temp + " " + temp + " " + temp + " " + temp);
if (k!==3) {mainOut(" ");}
}
mainOut("<br />");
}
}
}
mainOut("<br />");
}
console.log("Outputting is finished!");
},
// black or white (0 or 1)->(0 or 255)
retBin: function (num) {
if (num === 1) {return "255"}
else if (num === 0) {return "&nbsp;&nbsp;0"}
},
changeDispState: function () {
if (dispState === 0) { // display outputting tools
dispState = 1;
document.getElementById("output").style.display = "block";
document.getElementById("mainMat").style.margin = 0;
document.getElementById("mainMat").style.position = "relative";
document.getElementById("mainMat").style.top = 0;
document.getElementById("mainMat").style.left = 0;
document.getElementById("mat").style.width = "512px";
document.getElementById("dispPosSwitch").innerHTML = "Disable Outputting Tool";
/* jQuery
dispState = 1;
$("#output").css("display: block;");
$("#mainMat").css("margin: 0; position: relative; top: 0; left: 0;");
$("#mat").css("width: 512px;");
$("#dispPosSwitch").text("Disable Outputting Tool");
*/
} else { // undisplay outputting tools
dispState = 0;
document.getElementById("output").style.display = "none";
document.getElementById("mainMat").style.margin = "-200px 0 0 -200px";
document.getElementById("mainMat").style.position = "absolute";
document.getElementById("mainMat").style.top = "50%";
document.getElementById("mainMat").style.left = "50%";
document.getElementById("mat").style.width = "1024px";
document.getElementById("dispPosSwitch").innerHTML = "Enable Outputting Tool";
/* jQuery
dispState = 0;
$("#output").css("display: none;");
$("#mainMat").css("margin: -200px 0 0 -200px; position: absolute; top: 50%; left: 50%;");
$("#mat").css("width: 1024px;");
$("dispPosSwitch").text("Enable Outputting Tool");
*/
}
},// display tables and initialize main array, why i wrote them here
ready: function () {
te=3;
var cellIndex = 0;
document.write("<table id=\"mainMat\">")
for (k=0; k<=1; k++){
document.write("<tr>");
for (l=0; l<=te+4; l++){
document.write("<td class=\"alb\" cell_state=\"0\"></td>");
}
document.write("</tr>")
}
for(i=0; i<4; i++){
document.write("<tr>");
document.write("<td class=\"alb\" cell_state=\"0\"></td>");
document.write("<td class=\"alb\" cell_state=\"0\"></td>");
for(j=0; j<4; j++){
// x co.:i, y co.:j
// cell_index: markerMatrix.raw[cell_index]
elemId = "markerMatTable_"+i+"_"+j;
document.write("<td onmousedown=\"javascript:cell.mouseDown(this.id)\" onmouseover=\"javascript:cell.hover(this.id)\" onmouseup=\"javascript:cell.mouseUp(this.id)\" id="+elemId+" cell_state=\"0\" cell_index="+cellIndex+"></td>");
document.getElementById(elemId).style.backgroundColor = "white";
markerMatrix.raw[cellIndex] = 0;
cellIndex++;
}
document.write("<td class=\"alb\" cell_state=\"0\"></td>");
document.write("<td class=\"alb\" cell_state=\"0\"></td>");
document.write("</tr>")
}
for (k=0; k<2; k++){
document.write("<tr>");
for (l=0; l<8; l++){
document.write("<td class=\"alb\" cell_state=\"0\"></td>");
}
document.write("</tr>");
}
document.write("</table>");
}
}
// output passed strings to main output (div#mainOutput.innerHTML)
var mainOut = function (text) {
document.getElementById("mainOutput").innerHTML = document.getElementById("mainOutput").innerHTML + text;
}
// reset main output (div#mainOutput.innerHTML)
var resetMainOut = function () {
document.getElementById("mainOutput").innerHTML = "";
}
// functions for mouse events
var cell = {
mouseDown : function (thisId) {
if (document.getElementById(thisId).style.backgroundColor == "white") {
document.getElementById(thisId).style.backgroundColor = "black";
document.getElementById(thisId).setAttribute("cell_state", "1");
markerMatrix.raw[document.getElementById(thisId).getAttribute("cell_index")] = document.getElementById(thisId).getAttribute("cell_state");
mouseState = 1;
}
else {
document.getElementById(thisId).style.backgroundColor = "white";
document.getElementById(thisId).setAttribute("cell_state", "0");
markerMatrix.raw[document.getElementById(thisId).getAttribute("cell_index")] = document.getElementById(thisId).getAttribute("cell_state");
mouseState = 2;
}
},
hover: function (thisId) {
if (mouseState === 1) {
document.getElementById(thisId).style.backgroundColor = "black";
document.getElementById(thisId).setAttribute("cell_state", "1");
markerMatrix.raw[document.getElementById(thisId).getAttribute("cell_index")] = document.getElementById(thisId).getAttribute("cell_state");
}
if (mouseState === 2) {
document.getElementById(thisId).style.backgroundColor = "white";
document.getElementById(thisId).setAttribute("cell_state", "0");
markerMatrix.raw[document.getElementById(thisId).getAttribute("cell_index")] = document.getElementById(thisId).getAttribute("cell_state");
}
},
mouseUp: function (thisId) {
mouseState = 0;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment