Sunday, December 11, 2016

build motion bar

function buildmotionbar(location,namespace) {
var bar = document.createElement("div")
window.document.body.appendChild(bar)
var height = window.innerHeight * .7
var width = height / 7
var style = document.createAttribute("style")
bar.setAttributeNode(style)
style.value = position:fixed;" + location +":10px;top:" + (window.innerHeight * .2) + "px"
style.value = style.value + ";width:" + width + "px;height:" + height + "px"
style.value = style.value + ";font-size:" + (height / 10) + "px"
var readout = document.createElement("div")
bar.appendChild(readout)
var id = document.createAttribute("id")
readout.setAttributeNode(id)
id.value = namespace + "_motion"
var style = document.createAttribute("style")
readout.setAttributeNode(style)
style.value = "position:absolute;left:0%;bottom:0%"
style.value = style.value + ";width:90%;height:" + (100 / 7) + "%"
style.value = style.value + ";color:violet"
readout.innerHTML = 0
var buttonstring = "+,plus;-,minus;r,right;l,left;u,up;d,down".split(";")
for (var i = 0; i < buttonstring.length; i = i + 1) {
createbutton(i,buttonstring[i],bar)}
function createbutton(i,buttoninfo,bar,namespace) {
var button = document.createElement("div")
bar.appendChild(button)
var style = document.createAttribute("style")
button.setAttributeNode(style)
style.value = "position:absolute;left:0%;bottom:" + ((100 / 7) * (i + 1)) + "%"
style.value = style.value + ";width:90%;height:" + ((100 / 7) * .9) + "%"
style.value = style.value + ";background-color:lightgrey;color:pink;font-size:.9em"
var onmouseover = document.createAttribute("onmouseover")
button.setAttributeNode(onmouseover)
onmouseover.value = namespace + '("' + "start;" + buttoninfo.split(",")[1] + '")'
var onmouseout = document.createAttribute("onmouseout")
button.setAttributeNode(onmouseout)
onmouseout.value = namespace + '("' + "stop()" + '")'
button.appendChild(document.createTextNode(buttoninfo.split(",")[0]))}