unset c0 c1 c2 c3 c4 c5 c6 c7
case "$tpy[$color]" in
- c000) c0=checked;;
- c001) c1=checked;;
- c010) c2=checked;;
- c011) c3=checked;;
- c100) c4=checked;;
- c101) c5=checked;;
- c110) c6=checked;;
+ \#888) c0=checked;;
+ \#00A) c1=checked;;
+ \#0A0) c2=checked;;
+ \#0AA) c3=checked;;
+ \#A00) c4=checked;;
+ \#A0A) c5=checked;;
+ \#AA0) c6=checked;;
*) c7=checked;;
esac
cat <<EOF
<fieldset class=note>
- <input class=color type=radio name="$color" value="c000" id=${color}_000 $c0><label for=${color}_000></label>
- <input class=color type=radio name="$color" value="c001" id=${color}_001 $c1><label for=${color}_001></label>
- <input class=color type=radio name="$color" value="c010" id=${color}_010 $c2><label for=${color}_010></label>
- <input class=color type=radio name="$color" value="c011" id=${color}_011 $c3><label for=${color}_011></label>
- <input class=color type=radio name="$color" value="c100" id=${color}_100 $c4><label for=${color}_100></label>
- <input class=color type=radio name="$color" value="c101" id=${color}_101 $c5><label for=${color}_101></label>
- <input class=color type=radio name="$color" value="c110" id=${color}_110 $c6><label for=${color}_110></label>
- <input class=color type=radio name="$color" value="c111" id=${color}_111 $c7><label for=${color}_111></label>
+ <input class=color type=radio name="$color" value="#888" id=${color}_000 $c0><label for=${color}_000></label>
+ <input class=color type=radio name="$color" value="#00A" id=${color}_001 $c1><label for=${color}_001></label>
+ <input class=color type=radio name="$color" value="#0A0" id=${color}_010 $c2><label for=${color}_010></label>
+ <input class=color type=radio name="$color" value="#0AA" id=${color}_011 $c3><label for=${color}_011></label>
+ <input class=color type=radio name="$color" value="#A00" id=${color}_100 $c4><label for=${color}_100></label>
+ <input class=color type=radio name="$color" value="#A0A" id=${color}_101 $c5><label for=${color}_101></label>
+ <input class=color type=radio name="$color" value="#AA0" id=${color}_110 $c6><label for=${color}_110></label>
+ <input class=color type=radio name="$color" value="#FFF" id=${color}_111 $c7><label for=${color}_111></label>
<textarea name="session${session_n}_note${note_n}">${tpy[session${session_n}_note${note_n}]}</textarea>
</fieldset>
EOF
unset c0 c1 c2 c3 c4 c5 c6 c7
case "$tpy[color]" in
- c001) c1=checked;;
- c010) c2=checked;;
- c011) c3=checked;;
- c100) c4=checked;;
- c101) c5=checked;;
- c110) c6=checked;;
- c111) c7=checked;;
- *) c0=checked;;
+ \#00A) c1="checked";;
+ \#0A0) c2="checked";;
+ \#0AA) c3="checked";;
+ \#A00) c4="checked";;
+ \#A0A) c5="checked";;
+ \#AA0) c6="checked";;
+ \#FFF) c7="checked";;
+ *) c0="checked";;
esac
cat <<EOF
$(therapy_sessions)
<fieldset class=color>
- <input class=color type=radio name=color value="c000" id=c000 $c0><label for=c000></label>
- <input class=color type=radio name=color value="c001" id=c001 $c1><label for=c001></label>
- <input class=color type=radio name=color value="c010" id=c010 $c2><label for=c010></label>
- <input class=color type=radio name=color value="c011" id=c011 $c3><label for=c011></label>
- <input class=color type=radio name=color value="c100" id=c100 $c4><label for=c100></label>
- <input class=color type=radio name=color value="c101" id=c101 $c5><label for=c101></label>
- <input class=color type=radio name=color value="c110" id=c110 $c6><label for=c110></label>
- <input class=color type=radio name=color value="c111" id=c111 $c7><label for=c111></label>
+ <input class=color type=radio name=color onclick="javascript:setcol('#000')" value="#000" id=c000 $c0><label for=c000></label>
+ <input class=color type=radio name=color onclick="javascript:setcol('#00A')" value="#00A" id=c001 $c1><label for=c001></label>
+ <input class=color type=radio name=color onclick="javascript:setcol('#0A0')" value="#0A0" id=c010 $c2><label for=c010></label>
+ <input class=color type=radio name=color onclick="javascript:setcol('#0AA')" value="#0AA" id=c011 $c3><label for=c011></label>
+ <input class=color type=radio name=color onclick="javascript:setcol('#A00')" value="#A00" id=c100 $c4><label for=c100></label>
+ <input class=color type=radio name=color onclick="javascript:setcol('#A0A')" value="#A0A" id=c101 $c5><label for=c101></label>
+ <input class=color type=radio name=color onclick="javascript:setcol('#AA0')" value="#AA0" id=c110 $c6><label for=c110></label>
+ <input class=color type=radio name=color onclick="javascript:setcol('#FFF')" value="#FFF" id=c111 $c7><label for=c111></label>
</fieldset>
<img class="dotmark bg" src="?action=static_file&name=therapy_background.png" alt="">
-
+ <canvas id="canvas" class="dotmark ov" width="${bg_dim%x*}" height="${bg_dim#*x}"></canvas>
+
+ <input type=hidden id=image_serialize name=imagedata value="">
+ <span id="jsdebug" style="display: none; position: fixed; right:0; bottom:0">Debug</span>
+
+ <script><!--
+ body = document.body
+ canvas = document.getElementById("canvas")
+ dbg = document.getElementById("jsdebug")
+ image = canvas.getContext("2d")
+ mouse = 0
+ image_serialize=""
+ data=document.getElementById("image_serialize")
+
+ function setcol(c) {
+ image.fillStyle = c
+ image_serialize += " fill " + c
+ }
+
+ setcol("$tpy[color]")
+
+ function circle(x, y) {
+ sx=Math.floor(cscaleW * (x - canvas.offsetLeft + body.scrollLeft))
+ sy=Math.floor(cscaleH * (y - canvas.offsetTop + body.scrollTop))
+
+ image.beginPath()
+ image.arc( sx, sy, 5, 0, 2 * Math.PI )
+ image.fill()
+ image.closePath()
+
+ image_serialize += " circle " + sx + "," + sy + " " + (sx-5) + "," + sy
+ }
+
+ window.addEventListener( 'mouseup', function() { mouse = 0
+ dbg.innerHTML = image_serialize
+ data.value = image_serialize
+ } )
+ canvas.addEventListener( 'mousedown', function(e) {
+ mouse = 1
+
+ cscaleW = canvas.width / canvas.clientWidth
+ cscaleH = canvas.height / canvas.clientHeight
+
+ circle(e.clientX, e.clientY)
+ } )
+ canvas.addEventListener( 'mousemove', function(e) {
+ if ( mouse == 1 ) { circle(e.clientX, e.clientY) }
+ } )
+ --></script>
</form>
EOF
projects / confetti / blobdiff