From e4a974a6b990f9f5fb521303b82ef6289f6027fa Mon Sep 17 00:00:00 2001
From: paul <paul@plutz.net>
Date: Tue, 26 Jul 2016 20:17:35 +0000
Subject: [PATCH] selectable strokewidth in therapy

svn path=/trunk/; revision=129
---
 globals.sh                |  8 ++++
 static/therapy.css        | 20 ++++++++-
 static/therapy_draw.js    | 14 +++---
 templates/therapy.html.sh | 89 +++++++++++++++++----------------------
 4 files changed, 74 insertions(+), 57 deletions(-)

diff --git a/globals.sh b/globals.sh
index 38ae5af..ed95467 100755
--- a/globals.sh
+++ b/globals.sh
@@ -26,6 +26,14 @@ uuidgenerator(){
   head -c16 /dev/urandom |sha1sum - |cut -c1-32
 }
 
+_checked=''
+checked(){
+  if [ "$_checked" = "$1" ]; then
+    printf 'checked="checked"'
+  fi
+}
+
+
 VCF_FIELDS=(PHOTO LOGO FN NICKNAME SOUND GENDER KIND TITLE ROLE ORG MEMBER CATEGORIES ANNIVERSARY BDAY EMAIL TEL IMPP ADR URL LANG NOTE RELATED X-ZACK-JOINDATE X-ZACK-LEAVEDATE X-HEALTH-INSURANCE X-HEALTH-INSURANCE-NOCONTRIB X-CLIENT-REFERRAL)
 
 case "${PROFILE}" in
diff --git a/static/therapy.css b/static/therapy.css
index 16528a4..cdc6312 100644
--- a/static/therapy.css
+++ b/static/therapy.css
@@ -179,14 +179,29 @@ input.stickynote:checked + .stickynote > label:before {
   z-index: 2;
 }
 
-
+fieldset.penwidth,
 fieldset.color {
   position: absolute;
-  bottom: 0; right: 0; width: 2em;
+  right: 0; width: 2em;
   margin: .5em .5em .125em 2%;
   border: none;
   padding: 0;
 }
+fieldset.penwidth { bottom: 19em; }
+fieldset.penwidth > input {display: none;}
+fieldset.penwidth > input + label { display: none;}
+fieldset.penwidth > input:checked + label {
+  display: block;
+  width: 2em; height: 2em;
+  background-color: #000;
+  border: 1em solid #FFF;
+  border-radius: 1em;
+}
+fieldset.penwidth > input[value="4"]  + label { border-width: .75em; }
+fieldset.penwidth > input[value="12"] + label { border-width:  .5em; }
+fieldset.penwidth > input[value="36"] + label { border-width: .25em; }
+
+fieldset.color { bottom: 0; }
 fieldset.color > input.color + label {
   width: 2em; height: 2em;
 }
@@ -209,6 +224,7 @@ fieldset.color > input.color + label {
     margin-right: 0;
   }
   input.stickynote:checked + .stickynote { right: 50%; }
+  fieldset.penwidth,
   fieldset.color { position: fixed; }
   .dotmark {
     position: fixed;
diff --git a/static/therapy_draw.js b/static/therapy_draw.js
index 5a06728..8266ac5 100644
--- a/static/therapy_draw.js
+++ b/static/therapy_draw.js
@@ -29,16 +29,17 @@ image_serialize=""
 stx=0, sty=0
 cux=0, cuy=0
 
+function setstroke(w) {
+  image.lineWidth = w
+  data.value += " stroke-width " + image.lineWidth
+}
 function setcol(c) {
   this.c = c
   image.strokeStyle = c
   image.fillStyle =  c
-  if ( c == "#FFF" ) image.lineWidth = 32
-  else image.lineWidth = 4
-  data.value += " stroke " + c + "F" + " stroke-width " + image.lineWidth
+  data.value += " stroke " + c + "F"
 }
 
-
 function relX(x){
   if ( body.clientWidth >= 800 ){
     return Math.floor(cscaleW * (x - canvas.offsetLeft))
@@ -73,6 +74,9 @@ function drawstart(x, y) {
 
   stx=relX(x), sty=relY(y)
 
+  document.getElementsByName("penwidth").forEach(
+    function(x, y, z){ if (x.checked) setstroke(x.value); }
+  );
   document.getElementsByName("color").forEach(
     function(x, y, z){ if (x.checked) setcol(x.value); }
   );
@@ -86,7 +90,7 @@ function drawstart(x, y) {
 function drawstop() {
  
   // if path ends close to beginning ( < 50 px); then close path and fill
-  if ( mouse == 1 && Math.sqrt( Math.pow(stx - cux, 2) + Math.pow(sty - cuy, 2)) <= 50 && c !== "#FFF" ){
+  if ( false && mouse == 1 && Math.sqrt( Math.pow(stx - cux, 2) + Math.pow(sty - cuy, 2)) <= 50 && c !== "#FFF" ){
     image.lineTo( stx, sty )
     image.stroke()
 
diff --git a/templates/therapy.html.sh b/templates/therapy.html.sh
index 84f9cbe..e8af015 100755
--- a/templates/therapy.html.sh
+++ b/templates/therapy.html.sh
@@ -22,35 +22,26 @@ t_session_note(){
   color=session${session_n}_note${note_n}_color
   unset c0 c1 c2 c3 c4 c5 c6 c7
   
-  case "$tpy[$color]" in
-    \#888) c0=checked;;
-    \#00A) c1=checked;;
-    \#0A0) c2=checked;;
-    \#0AA) c3=checked;;
-    \#A00) c4=checked;;
-    \#A0A) c5=checked;;
-    \#AA0) c6=checked;;
-    *)    c7=checked;;
-  esac
-
-if [ "$note_n" -eq 1 -o -n "${tpy[session${session_n}_note${note_n}]}" ]; then
-  printf '<input class="trailbtn" type="checkbox" checked="checked">'
-else
-  printf '<input class="trailbtn" type="checkbox">'
-fi
-cat <<EOF
-  <fieldset class="note trailbox">
-    <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
+  if [ "$note_n" -eq 1 -o -n "${tpy[session${session_n}_note${note_n}]}" ]; then
+    printf '<input class="trailbtn" type="checkbox" checked="checked">'
+  else
+    printf '<input class="trailbtn" type="checkbox">'
+  fi
+
+  _checked="$(validate "$tpy[$color]" '#(888|00A|0A0|0AA|A00|A0A|AA0)' '#FFF')"
+	cat <<-EOF
+	  <fieldset class="note trailbox">
+	    <input class=color type=radio name="$color" value="#888" id=${color}_000 $(checked \#888)><label for=${color}_000></label>
+	    <input class=color type=radio name="$color" value="#00A" id=${color}_001 $(checked \#00A)><label for=${color}_001></label>
+	    <input class=color type=radio name="$color" value="#0A0" id=${color}_010 $(checked \#0A0)><label for=${color}_010></label>
+	    <input class=color type=radio name="$color" value="#0AA" id=${color}_011 $(checked \#0AA)><label for=${color}_011></label>
+	    <input class=color type=radio name="$color" value="#A00" id=${color}_100 $(checked \#A00)><label for=${color}_100></label>
+	    <input class=color type=radio name="$color" value="#A0A" id=${color}_101 $(checked \#A0A)><label for=${color}_101></label>
+	    <input class=color type=radio name="$color" value="#AA0" id=${color}_110 $(checked \#AA0)><label for=${color}_110></label>
+	    <input class=color type=radio name="$color" value="#FFF" id=${color}_111 $(checked \#FFF)><label for=${color}_111></label>
+	    <textarea name="session${session_n}_note${note_n}">${tpy[session${session_n}_note${note_n}]}</textarea>
+	  </fieldset>
+	EOF
 }
 
 t_session(){
@@ -111,18 +102,6 @@ therapy_sessions(){
 	EOF
 }
 
-unset c0 c1 c2 c3 c4 c5 c6 c7
-case "$tpy[color]" in
-  \#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
 <h1>$(l10n therapy)</h1>
 
@@ -192,16 +171,26 @@ EOF
 
 therapy_sessions
 
+_checked="$(validate "$tpy[penwidth]" '(4|12|36)' '4')"
+cat <<EOF
+  <fieldset class="penwidth">
+    <input type="radio" name="penwidth" value="4"  id="pw1" $(checked  4)><label for="pw2"></label>
+    <input type="radio" name="penwidth" value="12" id="pw2" $(checked 12)><label for="pw3"></label>
+    <input type="radio" name="penwidth" value="36" id="pw3" $(checked 36)><label for="pw1"></label>
+  </fieldset>
+EOF
+
+_checked="$(validate "$tpy[color]" '#(0[0A]{2}|A00|A0A|AA0|FFF)' '#000')"
 cat <<EOF
-  <fieldset class=color>
-    <input class="color" type="radio" name="color" value="#000" id="c000" $c0><label for="c000"></label>
-    <input class="color" type="radio" name="color" value="#00A" id="c001" $c1><label for="c001"></label>
-    <input class="color" type="radio" name="color" value="#0A0" id="c010" $c2><label for="c010"></label>
-    <input class="color" type="radio" name="color" value="#0AA" id="c011" $c3><label for="c011"></label>
-    <input class="color" type="radio" name="color" value="#A00" id="c100" $c4><label for="c100"></label>
-    <input class="color" type="radio" name="color" value="#A0A" id="c101" $c5><label for="c101"></label>
-    <input class="color" type="radio" name="color" value="#AA0" id="c110" $c6><label for="c110"></label>
-    <input class="color" type="radio" name="color" value="#FFF" id="c111" $c7><label for="c111"></label>
+  <fieldset class="color">
+    <input class="color" type="radio" name="color" value="#000" id="c000" $(checked \#000)><label for="c000"></label>
+    <input class="color" type="radio" name="color" value="#00A" id="c001" $(checked \#00A)><label for="c001"></label>
+    <input class="color" type="radio" name="color" value="#0A0" id="c010" $(checked \#0A0)><label for="c010"></label>
+    <input class="color" type="radio" name="color" value="#0AA" id="c011" $(checked \#0AA)><label for="c011"></label>
+    <input class="color" type="radio" name="color" value="#A00" id="c100" $(checked \#A00)><label for="c100"></label>
+    <input class="color" type="radio" name="color" value="#A0A" id="c101" $(checked \#A0A)><label for="c101"></label>
+    <input class="color" type="radio" name="color" value="#AA0" id="c110" $(checked \#AA0)><label for="c110"></label>
+    <input class="color" type="radio" name="color" value="#FFF" id="c111" $(checked \#FFF)><label for="c111"></label>
   </fieldset>
   <img class="dotmark bg" src="?static=therapy_background.png" alt="WARNING: Background Image not available!">
   <canvas id="canvas" class="dotmark ov" width="${bg_dim%x*}" height="${bg_dim#*x}"></canvas>
-- 
2.39.2