• I may be reinventing the wheel here, but I couldn't find any basic GUI elements for touchscreen devices like the HY-MiniSTM32V board I'm playing with. So, I started writing a simple, very basic GUI library.

    Right now, all I've done is create a pretty functional Button class, and only rectangular buttons. What you can do at the moment is place a button on the screen specifying location/size, color, and callbacks for press and release. The button will be drawn with the specified color, and the border and the button text drawn in inverse-color.

    When pressed, the button highlights by doing color invert (like a film negative) while pressed, calls the pressed callback, then redraws in its original state when released, and the released callback is called. Both callbacks are optional.

    Whole point is to easily draw buttons on a touchscreen that can then be used to control things.

    Code follows. As this file stands, it creates 4 demo buttons on the screen when loaded, one of which is labeled "BL off" which turns the backlight (on the HY-MiniSTM32V) off.

    echo(0);
    ts=require("Touchscreen");
    
    function unpack565RGB(rgb) {
      return {
        R : (rgb & 0b1111100000000000) >> 8,
        G : (rgb & 0b11111100000) >> 3,
        B : (rgb & 0b11111) << 3
      };
    }
    
    function unpack888RGB(rgb) {
      return {
        R : (rgb & 0xff0000) >> 16,
        G : (rgb & 0xff00) >> 8,
        B : (rgb & 0xff)
      };
    }
    
    Graphics.prototype.getRGB = function() {
      return unpack565RGB(this.getColor());
    };
    
    Graphics.prototype.setRGB = function() {
      if (arguments.length>1) c={R:arguments[0],G:arguments[1],B:argum­ents[2]};
      else c=arguments[0];
      this.setColor(c.R/255.0, c.G/255.0, c.B/255.0);
    };
    
    Graphics.prototype.getBgRGB = function() {
      return unpack555RGB(this.getBgColor());
    };
    
    Graphics.prototype.setBgRGB = function(r,g,b) {
      this.setBgColor(r/255.0, g/255.0, b/255.0);
    };
    
    var ON=true;
    var OFF=false;
    LCD.bl=function() {
      if (arguments.length===0) return digitalRead(B5);
      if (!arguments[0]) digitalWrite(B5,0);
      else digitalWrite(B5,1);
    };
    
    LCD.blon=function() {LCD.bl(ON);};
    LCD.bloff=function() {LCD.bl(OFF);};
    
    var buttons=[];
    function Button(b) {
      this.tl=b.tl;
      this.br=b.br;
      if (this.tl.x>this.br.x) this.tl.x=[this.br.x,this.br.x=this.tl.x­][0];
      if (this.tl.y>this.br.y) this.tl.y=[this.br.y,this.br.y=this.tl.y­][0];
      this.w=this.br.x-this.tl.x;
      this.h=this.br.y-this.tl.y;
      this.RGB=b.RGB;
      this.inverseRGB={R:255-this.RGB.R,G:255-­this.RGB.G,B:255-this.RGB.B};
      this.label=b.label;
      this.ID=b.ID;
      if (b.hasOwnProperty("onPress")) this.onPress=b.onPress;
      else this.onPress=undefined;
      if (b.hasOwnProperty("onRelease")) this.onRelease=b.onRelease;
      else this.onRelease=undefined;
      this.fontSize=Math.min(this.h-4,b.fontSi­ze);
      LCD.setFontVector(this.fontSize);
      while (LCD.stringWidth(this.label)>this.w-4) LCD.setFontVector(--this.fontSize);
      this.fontX=(this.tl.x+this.br.x-LCD.stri­ngWidth(this.label))/2;
      this.fontY=(this.tl.y+this.br.y-this.fon­tSize)/2;
      buttons.push(this);
      this.draw(this.RGB);
    }
                  
    Button.prototype.draw=function(c) {
      inverse={R:255-c.R,G:255-c.G,B:255-c.B};­
      LCD.setRGB(c);
      LCD.fillRect(this.tl.x,this.tl.y,this.br­.x,this.br.y);
      LCD.setRGB(inverse);
      LCD.drawRect(this.tl.x,this.tl.y,this.br­.x,this.br.y);
      LCD.setFontVector(this.fontSize);
      LCD.drawString(this.label,this.fontX,thi­s.fontY);
    };
    
    Button.prototype.hit=function(x,y) {
      if ((x<=this.br.x) && (x>=this.tl.x) && (y<=this.br.y) && (y>=this.tl.y)) return true;
      else return false;
    };
    
    var curBtn;
    function doButtons(state,x,y) {
      if (!curBtn) {
        for (var i=buttons.length-1; i>=0; i--) if (buttons[i].hit(x,y)) {
          curBtn=buttons[i];
          curBtn.draw(curBtn.inverseRGB);
          if (curBtn.onPress) curBtn.onPress(x,y);
        }
      }
      else {
        if (state) return;
        curBtn.draw(curBtn.RGB);
        if (curBtn.onRelease) curBtn.onRelease(x,y);
        curBtn=undefined;
      }
    }
    
    function onTouch(x,y) {doButtons(x?true:false,LCD.getWidth()-x­,y);}
    ts.connect(onTouch);
    
    function btnPress() {console.log(this.ID+" pressed");}
    function btnRelease() {console.log(this.ID+" released");}
    
    var btns=[
      {tl:{x:50,y:100},br:{x:170,y:150},RGB:{R­:255,G:0,B:0},label:"Button",fontSize:20­,onPress:btnPress,onRelease:btnRelease,I­D:"btn0"},
      {tl:{x:10,y:40},br:{x:130,y:90},RGB:{R:0­,G:0,B:0},label:"BL off",fontSize:20,onPress:function(){LCD.­bloff();},ID:"btn1"},
      {tl:{x:280,y:100},br:{x:320,y:120},RGB:{­R:255,G:255,B:0},label:"Button",fontSize­:20,onPress:btnPress,onRelease:btnReleas­e,ID:"btn2"},
      {tl:{x:100,y:160},br:{x:220,y:185},RGB:{­R:255,G:0,B:255},label:"Butt
    
About

Avatar for dwallersv @dwallersv started