index.xml

<?xml version="1.0" encoding="UTF-8" ?> 
<Module>
<ModulePrefs title="State Example5" height="1000">
  <Require feature="wave" /> 
</ModulePrefs>
<Content type="html">
<![CDATA[ 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>

<script>

var setXY
function ready2() {
    
    var setXY = function() {
        var xy = str.split(",")
        set('x', xy[0])
        set('y', xy[1])
    }
    
    var participants = wave.getParticipants()
    var uid = wave.getViewer().getId();
    var canvas = document.getElementById('c');
    var ctx = canvas.getContext('2d');
    
       
    var movex = 0
    var movey = 0
    
    function each(arr, func) {
        for (var i in arr) {
            ret = func(i, arr[i]);
            if (ret == false)
                return;
        }
    }
    
   
    
    function drawCharacter(i, p) {
        
        var x = get(p.getId(), 'x')
        //console.log(i + " x is " + x + " ," + (new Date()).getTime())
        var y = get(p.getId(), 'y')
        ctx.fillStyle = "rgb(200,0,0)";
        ctx.fillRect (x, y, 10, 10);
        
    }
    
    
      
    function main_loop() {
        ctx.clearRect(0,0,300,300);
        increment('x', 20 * movex);
        increment('y', 20 * movey);
        
        
        each(participants, drawCharacter)
    }
    
    var timer = setInterval(main_loop, 100)
    
    function get(pid, value) {
        return wave.getState().get(pid + "_" + value)
    }
    
    
    initialize();
    function initialize() {
        each(participants, function(i, p){
            setKey(p.getId(), 'x', 0)
            setKey(p.getId(), 'y', 0)
        })
    }
    
    
    function setKey(key, value,amount) {
        new_key = key + "_" + value;
        var obj = {}
        obj[new_key] = amount
        wave.getState().submitDelta(obj)
    }
    
    function set(value,amount) {
        new_key = uid + "_" + value;
        var obj = {}
        obj[new_key] = amount
        wave.getState().submitDelta(obj)
    }
    
    function increment(value,amount) {
        if (amount == 0)
            return;
        new_key = uid + "_" + value;
        var current = wave.getState().get(new_key)
        var obj = {}
        obj[new_key] = current - 0 + amount
        wave.getState().submitDelta(obj)
    }
    
    
    
    var keyDownMap = {
        '37' : function(){movex = -1},
        '38' : function(){movey = -1},
        '39' : function(){movex = 1}, //
        '40' : function(){movey = 1},
    }
    
    var keyUpMap = {
        '37' : function(){movex = 0},
        '38' : function(){movey = 0},
        '39' : function(){movex = 0}, //increment('x', -5);
        '40' : function(){movey = 0},
    }
    
    $(document.body).keydown(function(e){
       keyDownMap[e.keyCode]()
       //console.log(e.keyCode)
    })
    
    $(document.body).keyup(function(e){
       keyUpMap[e.keyCode]()
    })
    
    updateInfo();
    
    function updateInfo() {
        //console.log('trying')
        var participants = wave.getParticipants()
        //console.log(participants)
        
        for (var i in participants) {
            //console.log(i)
            p = participants[i];
            $('#info').append(" " + p.getId() + ":" + p.getDisplayName())
        }
        
       $('#info').append("<em>viewer "+ wave.getViewer().getId() +"</em>")
       $('#info').append("<em>host "+ wave.getHost().getId() +"</em>")
       wave.getState().submitDelta({'count': 32})
       alert(wave.getState().get('count')) 
        
    }
    
    
    //main_loop()
    //updateInfo()
    
    
 }
 
 
function ready() {
    var timer = setTimeout(ready2, 3000)
}
 
ready()

</script>

<div id="content_div" style="height: 300px; position: relative; width: 500px; border :2px solid blue;">

<canvas id="c" width="300" height="300" style = "border: 1px solid maroon;"></canvas>

</div>
    
    
    <div id = "info">hello</div>
    
    


    <script type="text/javascript">

    var div = document.getElementById('content_div');

    function buttonClicked() {
      var value = parseInt(wave.getState().get('count', '0'));
      wave.getState().submitDelta({'count': value + 1});
    }

    function stateUpdated() {
      if(!wave.getState().get('count')) {
        //div.innerHTML = "The count is 0."
      }
      else {
        //div.innerHTML = "The count is " + wave.getState().get('count');
      } 
    }
 
    function init() {
      if (wave && wave.isInWaveContainer()) {
        wave.setStateCallback(stateUpdated);
      }
    }
    gadgets.util.registerOnLoadHandler(init);

    // Reset value of "count" to 0
    function resetCounter(){
      wave.getState().submitDelta({'count': '0'});
    }

   

    </script>
    <input type=button value="Click Me!" id="butCount" onClick="buttonClicked()">
    <input type=button value="Reset" id="butReset" onClick="resetCounter()">
    
    <a href = "javascript: var x = prompt('hey'); eval(x);">yo</a>
    <a href = "javascript: var x = prompt('enter x,y like 0,0'); setXY(x);">set x, y</a>
    
    
  ]]> 
  </Content>
</Module>