/[suikacvs]/webroot/www/canvas/remote/client.html
Suika

Diff of /webroot/www/canvas/remote/client.html

Parent Directory Parent Directory | Revision Log Revision Log | View Patch Patch

revision 1.1 by wakaba, Sun May 24 07:58:24 2009 UTC revision 1.4 by wakaba, Sun May 24 13:36:58 2009 UTC
# Line 43  menu { Line 43  menu {
43    max-height: 120px; /* 160px - 20px * 2 */    max-height: 120px; /* 160px - 20px * 2 */
44    overflow: auto;    overflow: auto;
45    background-color: #C0C0C0;    background-color: #C0C0C0;
46      font-size: smaller;
47  }  }
48  #panel p {  #panel p {
49    margin: 0;    margin: 0;
# Line 58  menu { Line 59  menu {
59    
60  <p>  <p>
61  [<a href="javascript:setProp ('lineWidth', 1); togglePanel ()">1</a>  [<a href="javascript:setProp ('lineWidth', 1); togglePanel ()">1</a>
62  <a href="javascript:setProp ('lineWidth', 2); togglePanel ()">3</a>  <a href="javascript:setProp ('lineWidth', 2); togglePanel ()">2</a>
63  <a href="javascript:setProp ('lineWidth', 3); togglePanel ()">3</a>  <a href="javascript:setProp ('lineWidth', 3); togglePanel ()">3</a>
64  <a href="javascript:setProp ('lineWidth', 5); togglePanel ()">5</a>  <a href="javascript:setProp ('lineWidth', 5); togglePanel ()">5</a>
65  <a href="javascript:setProp ('lineWidth', 10); togglePanel ()">10</a>]  <a href="javascript:setProp ('lineWidth', 10); togglePanel ()">10</a>]
# Line 77  menu { Line 78  menu {
78  <a href="javascript:setProp ('strokeStyle', 'white'); togglePanel ()" style="color: white">white</a>]  <a href="javascript:setProp ('strokeStyle', 'white'); togglePanel ()" style="color: white">white</a>]
79  </p>  </p>
80    
81    <hr>
82    
83    <p>
84    <a href="javascript:savePNG (); togglePanel ()" class=editor-only>PNGize</a>
85    <a href="javascript:haiku (); togglePanel ()" class=editor-only>Haiku</a>
86    </p>
87    
88    <p>
89    <a href="client.html?mode=editor" id=clone-link>Clone</a>
90    <a href="client.html?mode=editor">New</a></menu>
91    </p>
92    
93    <p>
94    <a href="server.cgi?mode=list" rel=index>List</a>
95    </p>
96    
97  </section>  </section>
98    
99  <menu><a href="javascript:togglePanel ()" class=editor-only>Panel</a>  <menu><a href="javascript:togglePanel ()" class=editor-only>Panel</a>
100  <a href="client.html?mode=editor" id=edit-link rel=edit class=viewer-only>Edit</a>  <a href="client.html?mode=editor" id=edit-link rel=edit class=viewer-only>Edit</a>
101  <a href="client.html?mode=viewer" id=view-link class=editor-only>View</a>  <a href="client.html?mode=viewer" id=view-link class=editor-only>View</a>
 <a href="server.cgi?mode=list" rel=index>List</a>  
102  <a href="server.cgi?mode=prev" id=prev-link rel=prev>Prev</a>  <a href="server.cgi?mode=prev" id=prev-link rel=prev>Prev</a>
103  <a href="server.cgi?mode=next" id=next-link rel=next>Next</a>  <a href="server.cgi?mode=next" id=next-link rel=next>Next</a></menu>
 <a href="client.html?mode=editor">New</a></menu>  
104    
105  <script>  <script>
106    function $ (id) { return document.getElementById (id) }    function $ (id) { return document.getElementById (id) }
# Line 110  menu { Line 125  menu {
125    $('view-link').href += ';date=' + date;    $('view-link').href += ';date=' + date;
126    $('prev-link').href += ';date=' + date;    $('prev-link').href += ';date=' + date;
127    $('next-link').href += ';date=' + date;    $('next-link').href += ';date=' + date;
128      $('clone-link').href += ';import-date=' + date;
129    
130    param.mode = param.mode || 'editor';    param.mode = param.mode || 'editor';
131    document.body.className = 'mode-' + param.mode;    document.body.className = 'mode-' + param.mode;
132    
133      var newEvents = [];
134    
135      if (param['import-date']) {
136        newEvents = readRemoteImage ('server.cgi?date=' + param['import-date']);
137      }
138    
139    if (param.mode == 'viewer') {    if (param.mode == 'viewer') {
140      readRemoteImage ();      readRemoteImage ();
141      setInterval (readRemoteImage, 2000);      setInterval (readRemoteImage, 2000);
# Line 146  menu { Line 168  menu {
168        drawing = false;        drawing = false;
169      };      };
170    
     var newEvents = [];  
171      function write () {      function write () {
172        newEvents.push (Array.prototype.join.call (arguments, ','));        newEvents.push (Array.prototype.join.call (arguments, ','));
173      }      }
# Line 168  menu { Line 189  menu {
189        write (n, v);        write (n, v);
190      }      }
191    
192      function readRemoteImage () {      function readRemoteImage (u) {
193          u = u || url;
194        var xhr = new XMLHttpRequest ();        var xhr = new XMLHttpRequest ();
195        xhr.open ('GET', url, false);        xhr.open ('GET', u, false);
196        xhr.setRequestHeader ('Cache-Control', 'no-cache');        xhr.setRequestHeader ('Cache-Control', 'no-cache');
197        xhr.send (null);        xhr.send (null);
198        if (xhr.responseText) {        if (xhr.responseText) {
# Line 179  menu { Line 201  menu {
201            canvas.width = canvas.width; // clear            canvas.width = canvas.width; // clear
202            processEvents(events);            processEvents(events);
203          }          }
204            return events;
205        }        }
206          return [];
207      }      }
208    
209      function processEvents (events) {      function processEvents (events) {
# Line 212  menu { Line 236  menu {
236          $('panel').setAttribute ('hidden', '');          $('panel').setAttribute ('hidden', '');
237        }        }
238      }      }
239    
240        function savePNG () {
241          var data = canvas.toDataURL ('image/png');
242          var xhr = new XMLHttpRequest ();
243          xhr.open ('POST', url + ';mode=png', false);
244          xhr.setRequestHeader ('Content-Type', 'text/plain');
245          xhr.send (data);
246    //      if (xhr.status == 201) {
247    //        location.href = xhr.getResponseHeader ('Location');
248    //      }
249        }
250    
251        function haiku () {
252          var purl = url.replace (/server\.cgi/, 'proxy.php');
253          var data = canvas.toDataURL ('image/png');
254          var xhr = new XMLHttpRequest ();
255          xhr.open ('POST', purl + ';mode=haiku', true);
256          xhr.setRequestHeader ('Content-Type', 'text/plain');
257          xhr.setRequestHeader ('X-Data-URL', data);
258          xhr.send (null);
259        }
260  </script>  </script>
Legend:
Removed from v.1.1  
changed lines
  Added in v.1.4
admin@suikawiki.org
 ViewVC Help
Powered by ViewVC 1.1.24