New Windows and Android Gui Lib

First preliminary Build for the gui

first the windows Library
it allows you to add all the following. I will add more later but for now these were the basic requirements.

with system radius.

sketch code looks like this;


BMScontrols bms;
PShader edges;

void settings(){
  size(1200,600,P2D);
};

void setup(){
  
  bms = new BMScontrols(this,true);
  tab t = new tab(500,200,600,400,"title",bms);
  t.setvScroll();
  t.toggle = true;
  t.draggable = true;
  
  String []s1 = {"test1","test2"};
  
  Menu m = new Menu(350,100,90,20,10,s1,bms);
  m.setToggleBox();
  t.add(m);
  
  Menu m1 = new Menu(350,190,90,20,10,s1,bms);
  m1.setToggleBar();
  t.add(m1);
  
  Menu m2 = new Menu(450,100,90,20,10,s1,bms);
  m2.setRadio();
  
  t.add(m2);
  
  sliderBox sl1 = new sliderBox(40,100,90,90,10,s1,bms);
  //sl1.setTooltipsOff();
  sl1.draggable = false;
  sl1.tooltip.setToggleBox();
  sl1.setPieSquare();
  t.add(sl1);
  sliderBox sl2 = new sliderBox(200,100,90,20,10,s1,bms);
  //sl1.setTooltipsOff();
  sl2.draggable = false;
  //sl1.tooltip.setToggleBox();
  t.add(sl2);
  sliderBox sl3 = new sliderBox(200,200,90,20,10,s1,bms);
  //sl1.setTooltipsOff();
  sl3.draggable = false;
  sl3.setClassicRadio();
  t.add(sl3);
  
  sliderBox sl4 = new sliderBox(200,300,90,20,10,s1,bms);
  //sl1.setTooltipsOff();
  sl4.draggable = false;
  sl4.setClassicSquare();
  t.add(sl4);
  
  bms.add(t);
  bms.setRadius(5);
};

void draw(){
  
  bms.run();
  bms.setTabvScroll(1,0,200);
};

first preliminary build for Android screenshot taken from phone.

please note it needs ketai lib to work.
code to run everything looks like this.

import ketai.camera.*;
import ketai.cv.facedetector.*;
import ketai.data.*;
import ketai.net.*;
import ketai.net.bluetooth.*;
import ketai.net.nfc.*;
import ketai.net.nfc.record.*;
import ketai.net.wifidirect.*;
import ketai.sensors.*;
import ketai.ui.*;

BMScontrols bms;
PShader edges;

void settings(){
  size(1440,720,P2D);
};

void setup(){
  
  bms = new BMScontrols(this,true,true);
  edges = loadShader("edges.glsl");
  bms.camera.shader = edges;
  bms.setRadius(5);
  
};

void draw(){
  
  bms.run();
};

void onCameraPreviewEvent(){
  bms.readCam();
};
2 Likes

great and forward :heart: :heart: :heart:

1 Like

I try to run first sketch on device (Lollypop 5.1). Sketch compiled without errors. On run I have errors:

BUILD SUCCESSFUL in 27s
25 actionable tasks: 25 executed
window androidGui.Window@307b2fa5
androidGui.Window@307b2fa5
window androidGui.Window@28ab0388
window androidGui.Window@2f142121
FATAL EXCEPTION: GLThread 1962
Process: processing.test.bmscontrol, PID: 22147
java.lang.NullPointerException: Attempt to read from field 'ketai.camera.KetaiCamera androidGui.BMScamera.cam' on a null object reference
	at androidGui.BMScontrols.run(Unknown Source)
	at processing.test.bmscontrol.BMScontrol.draw(BMScontrol.java:102)
	at processing.core.PApplet.handleDraw(PApplet.java:1895)
	at processing.opengl.PSurfaceGLES$RendererGLES.onDrawFrame(PSurfaceGLES.java:264)
	at android.opengl.GLSurfaceView$GLThread.guardedRun(GLSurfaceView.java:1522)
	at android.opengl.GLSurfaceView$GLThread.run(GLSurfaceView.java:1239)

Please download and add the ketai jar from their github its what handles the camera

I added Ketai.JAR (v13), set permission CAMERA, run on Emulator - get the same error
What wrong I may do?
I add some println for diag:

  bms.add(t);
  bms.setRadius(5);
   println("test2");  // ok
};

void draw(){
  println("test3"); // ok
  bms.run();
  println("test4");  // no printed - fatal error
  bms.setTabvScroll(1,0,200);
  println("test5");

You need to install it in the processing libraries folder a requirement for all libraries. In the processing library folder create another folder with the exact name of the library including capitals - the .jar in that folder create a new folder called library and then place the library in that folder. Then in pde click add tools or import library make sure the library tab is selected and your library should be there, this will create your import statements.

If that fails and hopefully it shouldn’t add the library to the code folder in your sketch folder.

the library includes the following methods.

main class BMScontrols.
Constructors;

public BMScontrols(PApplet applet) {
		  this.applet = applet;
		  initColors();
	  };
	  
	  public BMScontrols(PApplet applet,boolean k) {
		  this.applet = applet;
		  initColors();
		  begin();
	  };
	  
	  public BMScontrols(PApplet applet,boolean k,boolean k1) {
		  this.applet = applet;
		  initColors();
		  begin();
		  createCamera();
	  };

The first creates a new controls instance. The second initialises with the file menu, the tab themeSettings which changes the background. and a window file browser. (Please note the android file browser is currently blank as I have not yet resolved the virtual file link that android returns).
note the value of the bools does not matter in the second two.

If the menus are desired after creation, the public function begin can be called, which will initialise the theme tab the file menu and the file explorer window.

I’ll add more functionality to the theme tab later to allow setting global text, textsize, textcolor, button fill colors etc.

add buttons tabs, menus and dropdowns etc, to the bms or any tab by calling add(object o)

the second important class which is also able to hold all the other classes is the tab class.

initialised as follows;

tab(float x,float y,float width,float height,String title,BMScontrols);
tab(float x,float y,float width,float height,BMScontrols);

first initialises with a titleButton with the desired label, the second has no titleButton.

tab.draggable = true;

if the tab has a titleButton, you can now click on it to drag the tab to the desired position.

tab.setvScroll();

enable the tab.sliderv of Slider class. This is a slider to scroll vertically in tab. All tab items are made to track its value.

tab.sethScroll();

enable the tab.sliderh of Slider class. This is a slider to scroll vertically in tab. All tab items are made to track its value.

in draw call
tab.setvScroll(int tab index,float startValue,float endValue);
tab.sethScroll(int tab index,float startValue,float endValue);

Menus are created with the follwing constructors

new Menu(float x,float y,float width,float height,String title,String[] labels,BMScontrols);
new Menu(float x,float y,float width,float height,float vSpacing,String title,String[] labels,BMScontrols);
new Menu(float x,float y,float width,String []labels,float height,BMScontrols);
new Menu(float x,float y,float width,float vSpacing,String []labels,float height,BMScontrols);

the first creates a menuButton with a menu which slides out on mousePressed. The second creates a menu with no menuButton.

call

menu.setRadio();

image

menu.setTogglebox();

image

menu.setTogglebar();

image

call setAlignment(String alignment) to change the alignments for the buttons. Takes value center, Center, CENTER or,left,Left, LEFT, "Right", ""right, "RIGHT".

call setRadius(float radius), or setRadius(float r1,r2,r3,r4). To set radius, second sets each corner seperatly.
Note all ui classes have this method.

to call a toggle on a button first consider if the button or slider you are clicking is in the bms or a tab.

from bms and tab you can call;

getMenu(int index);//menus
getdMenu(int index)// dropdowns;
getButton(int index)// button;
getTable(int index);//tables;
getTextBox(int index);//textboxes;
getTextArea(int index);//textareas;
getTextBlock(int index);//textblocks;
getSliderMenu(int index);
//only for bms
getTab(int i);

ill add methods to get by label later.

for menu this can be combined with .toggleAll() to allow mouse functionality on each item in the menu.

BMScontrols and tab class have the following methods to toggle buttons

//toggles all buttons in bms class;
public void toggleAllButtons(){
	};
	//toggles all buttons in a specific menu
	public void toggleMenuButtons(int i){
	};
	//toggle all buttons in all menus
	public void toggleAllMenuButtons(){
	};
        //toggles all buttons using a specific pvector as the mouse reference
	public void toggle(int i,int j,PVector m){
	};

then to add functionality
call

// toggle a button not linked to a menu
public boolean getToggle(int i){
		  };
//toggles a button j in menu index i
		  public boolean getToggle(int i,int j){
		  };

more to follow.

Yes, I install AndroidGui library:


Delete JAR from CODE subfolder and insert “import …”

import androidGui.*;
import ketai.camera.*;

I get the the same runtime error:

FATAL EXCEPTION: GLThread 212
Process: processing.test.bmscontrol, PID: 3221
java.lang.NullPointerException: Attempt to read from field 'ketai.camera.KetaiCamera androidGui.BMScamera.cam' on a null object reference
	at androidGui.BMScontrols.run(Unknown Source)
	at processing.test.bmscontrol.BMScontrol.draw(BMScontrol.java:86)
	at processing.core.PApplet.handleDraw(PApplet.java:1895)
	at processing.opengl.PSurfaceGLES$RendererGLES.onDrawFrame(PSurfaceGLES.java:264)
	at android.opengl.GLSurfaceView$GLThread.guardedRun(GLSurfaceView.java:1522)
	at android.opengl.GLSurfaceView$GLThread.run(GLSurfaceView.java:1239)

My AppManifest:

<?xml version="1.0" encoding="UTF-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android" android:versionCode="1" android:versionName="1.0" package="">
    <uses-sdk android:minSdkVersion="17" android:targetSdkVersion="29"/>
    <application android:icon="@mipmap/ic_launcher" android:label="">
        <activity android:name=".MainActivity" android:theme="@style/Theme.AppCompat.Light.NoActionBar.FullScreen">
            <intent-filter>
                <action android:name="android.intent.action.MAIN"/>
                <category android:name="android.intent.category.LAUNCHER"/>
            </intent-filter>
        </activity>
    </application>
    <uses-permission android:name="android.permission.CAMERA"/>
</manifest>

please make sure to use the latest version

and make sure this is how you are installing ketai
either
image
followed by


or

image

I use latest Ketai’s version - v14 (~102 kB):
24.03_2
I think problem in string

java.lang.NullPointerException: Attempt to read from field 'ketai.camera.KetaiCamera androidGui.BMScamera.cam' on a null object reference

I don’t understand reference to KetaiCamera in sketch without using camera.
P.S. All Ketai examples run Ok.

can you try new BMScontrols(this,true,true); for me please.

or new BMScontrols(this,true);

I see your ketai.jar is 78kB . It is “Ketai_v8_gingerbread”?

no its actually v13 stable

I accidentally gave you the top link thinking it was the most recent. But also please try my last two suggestions. I just noticed that id forgotten to check if cam was on if the BMS is initialised with just the PApplet.

So please check the other two to see if they work.

in any case ive updated the library on my github and tested all three constructors on my phone. Everything should work fine.

new BMScontrols(this,true,true);

Yes!!! This variant work Ok!
I have thouse strings in console:

BUILD SUCCESSFUL in 26s
25 actionable tasks: 25 executed
window androidGui.Window@3af8a7e1
androidGui.Window@3af8a7e1
window androidGui.Window@180c3906
CAMERA
window androidGui.Window@17384bc7
window androidGui.Window@2cf915f4
OpenGL error 1282 at bot endDraw(): invalid operation

But it seems that this error does not affect the GUI operation :slightly_smiling_face:

Where the Setting procedure is called?

void settings() {
  size(1200, 600, P2D);
};

It is initial variant - don’t work.

Ah yes I forgot about that you have to get the resolution of your phone screen and pass that in. Its something I’m not able to fix as its on the ketai end.

My phone resolution is 1440 x 720 and I can only use this resolution others do work but some dont and I havent found out the specifics of it, so instead i set it to my phones max resolution and it worked. Otherwise it wont work, again this is a ketai requirement.

I use

void settings() {
  size(displayWidth-10,displayHeight-10, P2D);
};
1 Like