# New Windows and Android Gui Lib

**URL:** <https://discourse.processing.org/t/new-windows-and-android-gui-lib/28775>\
**Category:** Gallery\
**Created:** [March 23, 2021, 8:48pm UTC](https://discourse.processing.org/t/new-windows-and-android-gui-lib/28775 "2021-03-23T20:48:33Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![paulgoux](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@paulgoux](https://discourse.processing.org/u/paulgoux)\
**Post date:** [March 23, 2021, 8:48pm UTC](https://discourse.processing.org/t/new-windows-and-android-gui-lib/28775/1 "2021-03-23T20:48:33Z")

</div>

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.

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/e/e6e88e01f26a791805d065b2a9d40eab205c5366.png)

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/5/564851d9a18589daec6a605b10090a83d81bdece.png)

with system radius.

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/2/2d480b5cf016927a716bf89e6f5f9759a1dce111.png)

sketch code looks like this;

```auto

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);
};

```

> **[paulgoux/Windows-Gui-Library](https://github.com/paulgoux/Windows-Gui-Library)**
>
> Windows Gui Library. Contribute to paulgoux/Windows-Gui-Library development by creating an account on GitHub.

first preliminary build for Android screenshot taken from phone.

 ![Screenshot_20210323_204409_processing.test.sketch_210320a](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/9/91ff5a594d43e92d79f7ea2b6dc91810aeb9645f.jpeg)

> **[paulgoux/Android-Gui-Library](https://github.com/paulgoux/Android-Gui-Library)**
>
> Android Gui Library. Contribute to paulgoux/Android-Gui-Library development by creating an account on GitHub.

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

```auto
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();
};

```

---

<div class="post-metadata">

**Author:** ![jafal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jafal/32/19112_2.png) [@jafal](https://discourse.processing.org/u/jafal)\
**Post date:** [March 24, 2021, 5:23am UTC](https://discourse.processing.org/t/new-windows-and-android-gui-lib/28775/2 "2021-03-24T05:23:30Z")

</div>

great and forward ❤ ❤ ❤

---

<div class="post-metadata">

**Author:** ![miasoft](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/miasoft/32/1902_2.png) [@miasoft](https://discourse.processing.org/u/miasoft)\
**Post date:** [March 24, 2021, 8:38am UTC](https://discourse.processing.org/t/new-windows-and-android-gui-lib/28775/3 "2021-03-24T08:38:51Z")

</div>

> [@paulgoux](#):
>
> BMScontrols bms;  
> PShader edges;
> 
> void settings(){  
> …

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

```auto
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)

```

---

<div class="post-metadata">

**Author:** ![paulgoux](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@paulgoux](https://discourse.processing.org/u/paulgoux)\
**Post date:** [March 24, 2021, 8:45am UTC](https://discourse.processing.org/t/new-windows-and-android-gui-lib/28775/4 "2021-03-24T08:45:54Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![paulgoux](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@paulgoux](https://discourse.processing.org/u/paulgoux)\
**Post date:** [March 24, 2021, 9:00am UTC](https://discourse.processing.org/t/new-windows-and-android-gui-lib/28775/5 "2021-03-24T09:00:48Z")

</div>

> **[ketai/rapid-android-development](https://github.com/ketai/rapid-android-development)**
>
> Example code for http://mobileprocessing.org. Contribute to ketai/rapid-android-development development by creating an account on GitHub.

---

<div class="post-metadata">

**Author:** ![miasoft](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/miasoft/32/1902_2.png) [@miasoft](https://discourse.processing.org/u/miasoft)\
**Post date:** [March 24, 2021, 9:20am UTC](https://discourse.processing.org/t/new-windows-and-android-gui-lib/28775/6 "2021-03-24T09:20:30Z")

</div>

> [@paulgoux](#):
>
> ketai jar from their github

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:

```auto
  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");

```

---

<div class="post-metadata">

**Author:** ![paulgoux](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@paulgoux](https://discourse.processing.org/u/paulgoux)\
**Post date:** [March 24, 2021, 9:30am UTC](https://discourse.processing.org/t/new-windows-and-android-gui-lib/28775/7 "2021-03-24T09:30:33Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![paulgoux](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@paulgoux](https://discourse.processing.org/u/paulgoux)\
**Post date:** [March 24, 2021, 10:06am UTC](https://discourse.processing.org/t/new-windows-and-android-gui-lib/28775/8 "2021-03-24T10:06:59Z")

</div>

the library includes the following methods.

main class BMScontrols.  
Constructors;

```auto
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;

```auto
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.

```auto
tab.draggable = true;

```

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

```auto
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.

```auto
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

```auto
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

```auto
menu.setRadio();

```

![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/c/cf173ef721d87b1346118ac888cfdd147be04f09.png)

```auto
menu.setTogglebox();

```

![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/4/422069624fbd98139aa70362a4cb7eb1a15ccd74.png)

```auto
menu.setTogglebar();

```

![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/9/961492114924909af7ff4bb19c2776e512319f0a.png)

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;

```auto
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

```auto
//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

```auto
// 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.

---

<div class="post-metadata">

**Author:** ![miasoft](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/miasoft/32/1902_2.png) [@miasoft](https://discourse.processing.org/u/miasoft)\
**Post date:** [March 24, 2021, 10:24am UTC](https://discourse.processing.org/t/new-windows-and-android-gui-lib/28775/9 "2021-03-24T10:24:05Z")

</div>

Yes, I install AndroidGui library:

 ![24.03_1](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/3/3133c76fbcb63a8733462106d3de3f3dd2928677.png)  
Delete JAR from CODE subfolder and insert “import …”

```auto
import androidGui.*;
import ketai.camera.*;

```

I get the the same runtime error:

```auto
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:

```auto
<?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>

```

---

<div class="post-metadata">

**Author:** ![paulgoux](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@paulgoux](https://discourse.processing.org/u/paulgoux)\
**Post date:** [March 24, 2021, 10:31am UTC](https://discourse.processing.org/t/new-windows-and-android-gui-lib/28775/10 "2021-03-24T10:31:30Z")

</div>

please make sure to use the latest version

> **[ketai/ketai](https://github.com/ketai/ketai/tree/master/downloads/Ketai_v10/library)**
>
> master/downloads/Ketai\_v10/library

and make sure this is how you are installing ketai  
either  
 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/e/e54f1f524a70dd81ca5bf4d18be1b5c62aebd9d4.png)  
followed by

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/e/e01be1480d1b728a429c10c5a4f9cd0170f6c667.png)  
or

![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/8/842c338781315c9103ffae57e1e032e9df48bfd8.png)

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/2/24644996aa6ad4f282ab2d92197f7cb5a21827a0.png)

---

<div class="post-metadata">

**Author:** ![miasoft](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/miasoft/32/1902_2.png) [@miasoft](https://discourse.processing.org/u/miasoft)\
**Post date:** [March 24, 2021, 12:04pm UTC](https://discourse.processing.org/t/new-windows-and-android-gui-lib/28775/11 "2021-03-24T12:04:03Z")

</div>

I use latest Ketai’s version - v14 (~102 kB):  
 ![24.03_2](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/f/f6d5cf46871ad7d08f6f2fd05caf6a2995a9bf78.png)  
I think problem in string

```auto
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.

---

<div class="post-metadata">

**Author:** ![paulgoux](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@paulgoux](https://discourse.processing.org/u/paulgoux)\
**Post date:** [March 24, 2021, 12:11pm UTC](https://discourse.processing.org/t/new-windows-and-android-gui-lib/28775/12 "2021-03-24T12:11:22Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![paulgoux](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@paulgoux](https://discourse.processing.org/u/paulgoux)\
**Post date:** [March 24, 2021, 12:17pm UTC](https://discourse.processing.org/t/new-windows-and-android-gui-lib/28775/13 "2021-03-24T12:17:26Z")

</div>

or `new BMScontrols(this,true);`

---

<div class="post-metadata">

**Author:** ![miasoft](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/miasoft/32/1902_2.png) [@miasoft](https://discourse.processing.org/u/miasoft)\
**Post date:** [March 24, 2021, 12:19pm UTC](https://discourse.processing.org/t/new-windows-and-android-gui-lib/28775/14 "2021-03-24T12:19:24Z")

</div>

I see your ketai.jar is 78kB . It is “Ketai\_v8\_gingerbread”?

---

<div class="post-metadata">

**Author:** ![paulgoux](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@paulgoux](https://discourse.processing.org/u/paulgoux)\
**Post date:** [March 24, 2021, 12:24pm UTC](https://discourse.processing.org/t/new-windows-and-android-gui-lib/28775/15 "2021-03-24T12:24:46Z")

</div>

no its actually v13 stable

> <https://github.com/ketai/ketai/blob/master/downloads/Ketai_v13/library/ketai.jar>

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.

---

<div class="post-metadata">

**Author:** ![paulgoux](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@paulgoux](https://discourse.processing.org/u/paulgoux)\
**Post date:** [March 24, 2021, 12:29pm UTC](https://discourse.processing.org/t/new-windows-and-android-gui-lib/28775/16 "2021-03-24T12:29:21Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![miasoft](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/miasoft/32/1902_2.png) [@miasoft](https://discourse.processing.org/u/miasoft)\
**Post date:** [March 24, 2021, 1:03pm UTC](https://discourse.processing.org/t/new-windows-and-android-gui-lib/28775/17 "2021-03-24T13:03:26Z")

</div>

`new BMScontrols(this,true,true);`

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

```auto
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 🙂

Where the Setting procedure is called?

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

```

---

<div class="post-metadata">

**Author:** ![miasoft](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/miasoft/32/1902_2.png) [@miasoft](https://discourse.processing.org/u/miasoft)\
**Post date:** [March 24, 2021, 1:04pm UTC](https://discourse.processing.org/t/new-windows-and-android-gui-lib/28775/18 "2021-03-24T13:04:50Z")

</div>

It is initial variant - don’t work.

---

<div class="post-metadata">

**Author:** ![paulgoux](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@paulgoux](https://discourse.processing.org/u/paulgoux)\
**Post date:** [March 24, 2021, 1:13pm UTC](https://discourse.processing.org/t/new-windows-and-android-gui-lib/28775/19 "2021-03-24T13:13:49Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![miasoft](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/miasoft/32/1902_2.png) [@miasoft](https://discourse.processing.org/u/miasoft)\
**Post date:** [March 24, 2021, 1:37pm UTC](https://discourse.processing.org/t/new-windows-and-android-gui-lib/28775/20 "2021-03-24T13:37:06Z")

</div>

I use

```auto
void settings() {
  size(displayWidth-10,displayHeight-10, P2D);
};

```

[Next page](https://discourse.processing.org/t/new-windows-and-android-gui-lib/28775.md?page=2)