EmbAJAXJoystick.h

 
#ifndef EMBAJAXJOYSTICK_H
#define EMBAJAXJOYSTICK_H
 
#include "EmbAJAX.h"
 
const char EmbAJAXJoystick_SNAP_BACK[] = "if (!pressed) { x = 0; y = 0; }\n";
const char EmbAJAXJoystick_NO_SNAP_BACK[] = "";
const char EmbAJAXJoystick_FREE_POSITION[] = "";
const char EmbAJAXJoystick_POSITION_9_DIRECTIONS[] = "if (pressed) {\n"
                                                      "  if (x < -500) x = -1000;\n"
                                                      "  else if (x > 500) x = 1000\n"
                                                      "  else x = 0;\n"
                                                      "\n"
                                                      "  if (y < -500) y = -1000;\n"
                                                      "  else if (y > 500) y = 1000\n"
                                                      "  else y = 0;\n"
                                                      "}\n";
 
class EmbAJAXJoystick : public EmbAJAXElement {
public:
    EmbAJAXJoystick(const char* id, int width, int height, const char* position_adjust=EmbAJAXJoystick_FREE_POSITION, const char* snap_back=EmbAJAXJoystick_SNAP_BACK) : EmbAJAXElement(id) {
        _width = width;
        _height = height;
        _position_adjust = position_adjust;
        _snap_back = snap_back;
    }
    void print() const override {
        EmbAJAXBase::_driver->printFormatted("<canvas id=", HTML_QUOTED_STRING(_id), " width=", INTEGER_VALUE(_width), " height=", INTEGER_VALUE(_height),
                                             " style=\"cursor: all-scroll\"></canvas>"   // style="border-radius:50%; background-color:grey; cursor: all-scroll"
                                            "<script>\n"
                                            "var elem = document.getElementById(", JS_QUOTED_STRING(_id), ");\n");
        EmbAJAXBase::_driver->printFormatted(
           "elem.__defineSetter__('coords', function(value) {\n"
           "  var vals = value.split(',');\n"
           "  this.update(vals[0], vals[1], false);\n"
           "});\n"
           "\n"
           "elem.updateFromClient = function(x, y, nomerge=false) {\n"
           "  var width = this.width;\n"
           "  var height = this.height;\n"
           "  var pressed = this.pressed;\n"
           "  x = Math.round(((x - width / 2) * 2000) / (width-40));\n"    // Scale values to +/-1000, independent of display size
           "  y = Math.round(((y - height / 2) * 2000) / (height-40));\n",
           PLAIN_STRING(_snap_back), "",  // NOTE: inserted "", because printFormatted macro assumed static string between each arg
           PLAIN_STRING(_position_adjust),
           "  this.update(x, y, true, nomerge);\n"
           "}\n"
           "\n"
           "elem.update = function(x, y, send=true, nomerge=false) {\n"
           "  var oldx = this.posx;\n"
           "  var oldy = this.posy;\n"
           "  this.posx = x;\n"
           "  this.posy = y;\n"
           "  if (this.posx != oldx || this.posy != oldy) {\n"
           "    var ctx = this.getContext('2d');\n"
           "    ctx.clearRect(0, 0, this.width, this.height);\n"
           "    this.drawKnob(ctx, this.posx, this.posy);\n"
           "    if(send) doRequest(this.id,this.pressed + ',' + this.posx + ',' + this.posy, nomerge ? 2 : 1);\n"
           "  }\n"
           "}\n"
           "\n"
           // TODO: This should be customizable
           "elem.drawKnob = function(ctx, x, y) {\n"
           "  var width = this.width;\n"
           "  var height = this.height;\n"
           "  x = x * (width-40) / 2000 + width / 2;\n"
           "  y = y * (height-40) / 2000 + height / 2;\n"
           "  ctx.beginPath();\n"
           "  ctx.arc(x, y, 15, 0, 2 * Math.PI);\n"
           "  ctx.stroke();\n"
           "  ctx.fill();\n"
           "}\n"
           "\n"
           "elem.press = function(x, y) {\n"
           "  this.pressed = 1;\n"
           "  this.updateFromClient(x, y, true);\n"
           "}\n"
           "\n"
           "elem.move = function(x, y) {\n"
           "  this.updateFromClient(x, y);\n"
           "}\n"
           "\n"
           "elem.release = function(x, y) {\n"
           "  this.pressed = 0;\n"
           "  this.updateFromClient(x, y, true);\n"
           "}\n"
           "\n"
           "elem.addEventListener('mousedown', function(event) { this.press(event.offsetX, event.offsetY); }.bind(elem), false);\n"
           "elem.addEventListener('mousemove', function(event) { this.move(event.offsetX, event.offsetY); }.bind(elem), false);\n"
           "elem.addEventListener('mouseup', function(event) { this.release(event.offsetX, event.offsetY); }.bind(elem), false);\n"
           "elem.addEventListener('mouseleave', function(event) { this.release(event.offsetX, event.offsetY); }.bind(elem), false);\n"
           "elem.addEventListener('touchstart', function(event) { this.press(event.touches[0].offsetX, event.touches[0].offsetY); }.bind(elem), false);\n"
           "elem.addEventListener('touchmove', function(event) { this.move(event.touches[0].offsetX, event.touches[0].offsetY); }.bind(elem), false);\n"
           "elem.addEventListener('touchend', function(event) { this.release(event.touches[0].offsetX, event.touches[0].offsetY); }.bind(elem), false);\n"
           "</script>\n");
    }
    void updateFromDriverArg(const char* argname) {
        const int bufsize = 16;
        char buf[bufsize];
        _driver->getArg(argname, buf, bufsize);
        // format: "P,X,Y", each a number. Parsing from reverse
        int p = bufsize;
        while (--p >= 0) if (buf[p] == '\0') break;
        while (--p >= 0) if (buf[p] == ',') break;
        _cury = atoi(buf + p + 1);
        buf[p] = '\0';
        while (--p >= 0) if (buf[p] == ',') break;
        _curx = atoi(buf + p + 1);
        buf[p] = '\0';
        _pressed = atoi(buf);
        updateValueString();
    }
    int getX() const { return _curx; };
    int getY() const { return _cury; };
    void setPosition (int x, int y) {
        if (x != _curx || y != _cury) {
            _curx = x;
            _cury = y;
            setChanged();
            updateValueString();
        }
    }
    const char* valueProperty(uint8_t which = EmbAJAXBase::Value) const override {
        if (which == EmbAJAXBase::Value) return "coords";
        return EmbAJAXElement::valueProperty(which);
    }
    const char* value(uint8_t which = EmbAJAXBase::Value) const override {
        if (which == EmbAJAXBase::Value) return _value;
        return EmbAJAXElement::value(which);
    }
private:
    void updateValueString() {
        itoa(_curx, _value, 10);
        int p = 0;
        while (_value[p] != '\0') ++p;
        _value[p] = ',';
        itoa(_cury, _value + p + 1, 10);
    }
    char _value[16];
    int _width;
    int _height;
    const char* _snap_back;
    const char* _position_adjust;
    int _curx, _cury;
    bool _pressed;
};
 
#endif