Users complain boring user interface of my apps

Everything else that doesn't fall into one of the other PB categories.
User avatar
Kiffi
Addict
Addict
Posts: 1353
Joined: Tue Mar 02, 2004 1:20 pm
Location: Amphibios 9

Re: Users complain boring user interface of my apps

Post by Kiffi »

the.weavster wrote:JVM :D
Java :cry:
B4J :D
Hygge
User avatar
the.weavster
Addict
Addict
Posts: 1537
Joined: Thu Jul 03, 2003 6:53 pm
Location: England

Re: Users complain boring user interface of my apps

Post by the.weavster »

Kiffi wrote:B4J :D
Cool :)

I notice Jython has just sprung back to life too. Maybe they're hoping make hay out of CPython 2.7 being EOL in January.
IdeasVacuum
Always Here
Always Here
Posts: 6425
Joined: Fri Oct 23, 2009 2:33 am
Location: Wales, UK
Contact:

Re: Users complain boring user interface of my apps

Post by IdeasVacuum »

It should be possible to write your GUI in HTML and CSS, displayed via a WebGadget.

Or indeed Spider Basic might be the answer.
IdeasVacuum
If it sounds simple, you have not grasped the complexity.
wayne-c
Enthusiast
Enthusiast
Posts: 335
Joined: Tue Jun 08, 2004 10:29 am
Location: Zurich, Switzerland

Re: Users complain boring user interface of my apps

Post by wayne-c »

IdeasVacuum wrote:It should be possible to write your GUI in HTML and CSS, displayed via a WebGadget.
Exactly what I did for my commercial project: PureBasic Server and Client with all GUI in a WebGadget.

Users never! complained about a boring interface, on the contrary, I always get compliments for the UI. We use our own JavaScript framework and styles where - of course - we put a lot of effort in to look professional (we have Clients for Windows, MacOS and iOS).

What I would really like to have is better access to JavaScript (both directions) in the WebGadget, for both Windows and MacOS. This is done in a very hacky way by now (but it works).
As you walk on by, Will you call my name? Or will you walk away?
IdeasVacuum
Always Here
Always Here
Posts: 6425
Joined: Fri Oct 23, 2009 2:33 am
Location: Wales, UK
Contact:

Re: Users complain boring user interface of my apps

Post by IdeasVacuum »

Hi wayne-c

I would expect Spider Basic to be the solution by now - but if not, perhaps a GUI defined with Spider and the remainder with PB.
IdeasVacuum
If it sounds simple, you have not grasped the complexity.
Dynamic Ditto
New User
New User
Posts: 3
Joined: Sat Feb 16, 2019 4:45 am

Re: Users complain boring user interface of my apps

Post by Dynamic Ditto »

What about this? I haven't looked into the finer details regarding its usage, though. It's MIT licensed.

https://lcui.org
Cyllceaux
Enthusiast
Enthusiast
Posts: 458
Joined: Mon Jun 23, 2014 1:18 pm
Contact:

Re: Users complain boring user interface of my apps

Post by Cyllceaux »

Dynamic Ditto wrote:What about this? I haven't looked into the finer details regarding its usage, though. It's MIT licensed.

https://lcui.org
Uh... this looks nice... and is really small (1,7MB x64 / 349KB x86).
I will give it a try
Little John
Addict
Addict
Posts: 4519
Joined: Thu Jun 07, 2007 3:25 pm
Location: Berlin, Germany

Re: Users complain boring user interface of my apps

Post by Little John »

A reference to the work of firace should not be missing here:
SWV: A simple HTML/JS desktop GUI engine for PB
purenet
User
User
Posts: 30
Joined: Wed Oct 21, 2009 10:11 am

Re: Users complain boring user interface of my apps

Post by purenet »

Hi,

Please look an excellent PureBasic UI modules created by Thorsten1867.
There is several modules (SwitchGadget, ButtonEx, etc..) available to create modern UI's.

purenet
Cyllceaux
Enthusiast
Enthusiast
Posts: 458
Joined: Mon Jun 23, 2014 1:18 pm
Contact:

Re: Users complain boring user interface of my apps

Post by Cyllceaux »

I make some Tests with LCUI. https://lcui.org/#get-started

(Lib size ~400KB up to ~1,7MB)


It is easy to use, but has big problems with DPI.
a simple test has a XML for structure, CSS for style and Code... really simple code.


CSS:

Code: Select all

textview.text-hello {
    font-size: 18px;
    font-family: "Segoe UI";
    text-align: center;
    padding: 25px;
    margin: 25px;
    border: 1px solid #eee;
    background-color: #f8f9fa;
}
#btn, #edit {
  margin: 0 0 0 25px;
}

XML:

Code: Select all

<?xml version="1.0" encoding="UTF-8" ?>
<lcui-app>
  <resource type="text/css" src="example1.css"/>
  <ui>
    <textview id="text-hello" type="textview" class="text-hello">
      [i][color=#f00]Hello[/color][/i], [b][color=#fff][bgcolor=#f00]World![/bgcolor][/color][/b]
    </textview>
    <textedit id="edit">[i][color=#f00]Hello[/color][/i], [b][color=#fff][bgcolor=#f00]World![/bgcolor][/color][/b]</textedit>
    <button id="btn">Change</button>
  </ui>
</lcui-app>

small Include with main features. (It's example2)

Code: Select all

EnableExplicit


Macro MM
	"
EndMacro

Macro _getFunction(function)
	LCUI_#function=GetFunction(_lcuilib,MM#function#MM)
	If LCUI_#function=0
		MessageRequester("Fehler",MM#Methode '#function' konnte nicht geladen werden.MM,#PB_MessageRequester_Error)
		result=#False
	EndIf
EndMacro



Structure LCUI_Widget Align #PB_Structure_AlignC
	hash.u
	state.i
	id.s
	type.s
EndStructure

Structure LCUI_WidgetEvent Align #PB_Structure_AlignC
	type.i
	*data
	*target.LCUI_Widget
	cancel_bubble.u
EndStructure

Structure LCUI_Rect Align #PB_Structure_AlignC
	x.i
	y.i
	w.i
	h.i
EndStructure

Structure LCUI_MetricsRec Align #PB_Structure_AlignC
	dpi.f
	density.f
	scaled_density.f
	scale.f
EndStructure

Enumeration LCUI_DensityLevel
	#DENSITY_LEVEL_SMALL
	#DENSITY_LEVEL_NORMAL
	#DENSITY_LEVEL_LARGE
	#DENSITY_LEVEL_BIG
EndEnumeration

Global _lcuilib

PrototypeC ProtoLCUI_Init()
PrototypeC.i ProtoLCUI_Main()
PrototypeC.c ProtoLCUI_GetVersion()
PrototypeC ProtoLCUIWidget_GetRoot()
PrototypeC ProtoLCUIBuilder_LoadFile(pfad.p-ascii)
PrototypeC ProtoLCUIWidget_GetById(pfad.p-ascii)
PrototypeC ProtoWidget_Append(*root.LCUI_Widget,*pack.LCUI_Widget)
PrototypeC ProtoWidget_Unwrap(*pack.LCUI_Widget)
PrototypeC ProtoWidget_BindEvent(*pack.LCUI_Widget,eventname.p-ascii,*procedure,arg1,arg2)
PrototypeC ProtoTextEdit_GetTextW(*pack.LCUI_Widget,start,size,*data)
PrototypeC ProtoTextView_SetTextW(*pack.LCUI_Widget,*data)
PrototypeC ProtoWidget_UpdateStyle(*pack.LCUI_Widget,arg)
PrototypeC ProtoLCUIMetrics_SetDensityLevel(level.i);LCUI_DensityLevel
PrototypeC ProtoLCUIMetrics_SetScaledDensityLevel(level.i);LCUI_DensityLevel
PrototypeC ProtoLCUIMetrics_SetScale(scale.f)
PrototypeC ProtoLCUIMetrics_SetDpi(dpi.f)
PrototypeC ProtoLCUIWidget_RefreshStyle()
PrototypeC ProtoLCUIDisplay_InvalidateArea(*area.LCUI_Rect)
PrototypeC ProtoLCUI_GetMetrics()
PrototypeC ProtoLCUI_InitMetrics()

Global LCUI_LCUI_Init.ProtoLCUI_Init
Global LCUI_LCUI_Main.ProtoLCUI_Main
Global LCUI_LCUI_GetVersion.ProtoLCUI_GetVersion
Global LCUI_LCUIWidget_GetRoot.ProtoLCUIWidget_GetRoot
Global LCUI_LCUIBuilder_LoadFile.ProtoLCUIBuilder_LoadFile
Global LCUI_LCUIWidget_GetById.ProtoLCUIWidget_GetById
Global LCUI_Widget_Append.ProtoWidget_Append
Global LCUI_Widget_Unwrap.ProtoWidget_Unwrap
Global LCUI_Widget_BindEvent.ProtoWidget_BindEvent
Global LCUI_TextEdit_GetTextW.ProtoTextEdit_GetTextW
Global LCUI_TextView_SetTextW.ProtoTextView_SetTextW
Global LCUI_Widget_UpdateStyle.ProtoWidget_UpdateStyle
Global LCUI_LCUIMetrics_SetDensityLevel.ProtoLCUIMetrics_SetDensityLevel
Global LCUI_LCUIMetrics_SetScaledDensityLevel.ProtoLCUIMetrics_SetScaledDensityLevel
Global LCUI_LCUIMetrics_SetScale.ProtoLCUIMetrics_SetScale
Global LCUI_LCUIMetrics_SetDpi.ProtoLCUIMetrics_SetDpi
Global LCUI_LCUIWidget_RefreshStyle.ProtoLCUIWidget_RefreshStyle
Global LCUI_LCUIDisplay_InvalidateArea.ProtoLCUIDisplay_InvalidateArea
Global LCUI_LCUI_GetMetrics.ProtoLCUI_GetMetrics
Global LCUI_LCUI_InitMetrics.ProtoLCUI_InitMetrics

Procedure.b LCUI_Init()
	_lcuilib=OpenLibrary(#PB_Any,"LCUI.dll")
	Protected result.b=#False
	
	If _lcuilib
		result=#True
		_getFunction(LCUI_Init)
		_getFunction(LCUI_Main)
		_getFunction(LCUI_GetVersion)
		_getFunction(LCUIWidget_GetRoot)
		_getFunction(LCUIBuilder_LoadFile)
		_getFunction(LCUIWidget_GetById)
		_getFunction(Widget_Append)
		_getFunction(Widget_Unwrap)
		_getFunction(Widget_BindEvent)
		_getFunction(TextEdit_GetTextW)
		_getFunction(TextView_SetTextW)
		_getFunction(Widget_UpdateStyle)
		_getFunction(LCUIMetrics_SetDensityLevel)
		_getFunction(LCUIMetrics_SetScaledDensityLevel)
		_getFunction(LCUIMetrics_SetScale)
		_getFunction(LCUIMetrics_SetDpi)
		_getFunction(LCUIWidget_RefreshStyle)
		_getFunction(LCUIDisplay_InvalidateArea)
		_getFunction(LCUI_GetMetrics)
		_getFunction(LCUI_InitMetrics)
	Else
		MessageRequester("Fehler","LCUI.dll konnte nicht geladen werden",#PB_MessageRequester_Error)
	EndIf
	
	ProcedureReturn result
EndProcedure

Procedure LCUI_Close()
	If IsLibrary(_lcuilib)
		CloseLibrary(_lcuilib)
	EndIf
EndProcedure

CompilerIf #PB_Compiler_IsMainFile
	
	
	#EXAMPLE=3
	
	CompilerSelect #EXAMPLE
		CompilerCase 2
			Procedure OnBtnClick(*self.LCUI_Widget,*event.LCUI_WidgetEvent,*arg)
				Protected *edit.LCUI_Widget = LCUI_LCUIWidget_GetById("edit")
				Protected *txt.LCUI_Widget = LCUI_LCUIWidget_GetById("text-hello")
				Protected *str=AllocateMemory(255)
				
				LCUI_TextEdit_GetTextW(*edit, 0, 255, *str)
				LCUI_TextView_SetTextW(*txt, *str)			
			EndProcedure
		CompilerCase 3
			Enumeration _t
				#TYPE_DENSITY
				#TYPE_SCALED_DENSITY
				#TYPE_SCALE
				#TYPE_DPI
			EndEnumeration
			
			Structure _tdat
				type.i
				level.i
			EndStructure
			
			Procedure OnDebugClick(*self.LCUI_Widget,*event.LCUI_WidgetEvent,*arg)
				Protected *dat.LCUI_MetricsRec=LCUI_LCUI_GetMetrics()
				Debug *dat\dpi
				Debug *dat\density
				Debug *dat\scale
				Debug *dat\scaled_density
			EndProcedure
			
			Procedure OnButtonClick(*self.LCUI_Widget,*event.LCUI_WidgetEvent,*arg)
				Protected *dat._tdat=*event\data
				Select *dat\type
					Case #TYPE_DENSITY:
						LCUI_LCUIMetrics_SetDensityLevel(*dat\level)
						
					Case #TYPE_SCALED_DENSITY:
						LCUI_LCUIMetrics_SetScaledDensityLevel(*dat\level)
						
					Case #TYPE_SCALE:
						LCUI_LCUIMetrics_SetScale(*dat\level / 100.0)
						
					Case #TYPE_DPI:
						LCUI_LCUIMetrics_SetDpi(*dat\level )
						LCUI_LCUIMetrics_SetScale(*dat\level / 100.0)
				EndSelect
				LCUI_LCUIWidget_RefreshStyle()
				LCUI_LCUIDisplay_InvalidateArea(#Null)
			EndProcedure
			
			
			
			Procedure SetButton(id.s,type,level)
				
				Protected *btn.LCUI_Widget
				Protected *dat._tdat= AllocateStructure(_tdat)
				*dat\level=level
				*dat\type=type						
				*btn = LCUI_LCUIWidget_GetById(id)	
				LCUI_Widget_BindEvent(*btn, "click", @OnButtonClick(), *dat, #Null)
			EndProcedure
			
			Procedure InitButtons()
				SetButton("btn-density-small", #TYPE_DENSITY, #DENSITY_LEVEL_SMALL)
				SetButton("btn-density-normal", #TYPE_DENSITY, #DENSITY_LEVEL_NORMAL)
				SetButton("btn-density-large", #TYPE_DENSITY, #DENSITY_LEVEL_LARGE)	 
				SetButton("btn-density-big", #TYPE_DENSITY, #DENSITY_LEVEL_BIG)			 
				SetButton("btn-scaled-density-small", #TYPE_SCALED_DENSITY, #DENSITY_LEVEL_SMALL)
				SetButton("btn-scaled-density-normal", #TYPE_SCALED_DENSITY,#DENSITY_LEVEL_NORMAL)
				SetButton("btn-scaled-density-large", #TYPE_SCALED_DENSITY, #DENSITY_LEVEL_LARGE)
				SetButton("btn-scaled-density-big", #TYPE_SCALED_DENSITY,#DENSITY_LEVEL_BIG)
				SetButton("btn-scale-small", #TYPE_SCALE, 75)
				SetButton("btn-scale-normal", #TYPE_SCALE, 100)
				SetButton("btn-scale-large", #TYPE_SCALE, 150) 
				SetButton("btn-scale-big", #TYPE_SCALE, 200)	 
				SetButton("btn-dpi-small", #TYPE_DPI, 75)
				SetButton("btn-dpi-normal", #TYPE_DPI, 100)
				SetButton("btn-dpi-large", #TYPE_DPI, 150) 
				SetButton("btn-dpi-big", #TYPE_DPI, 200)	 
			EndProcedure
	CompilerEndSelect
	If LCUI_Init()
		LCUI_LCUI_Init()
		
		
		CompilerSelect #EXAMPLE
			CompilerCase 1
				Debug LCUI_LCUI_GetVersion()
			CompilerDefault
				CompilerSelect #EXAMPLE
					CompilerCase 2
						Define.LCUI_Widget *root, *pack, *btn
						*root = LCUI_LCUIWidget_GetRoot()
						*pack = LCUI_LCUIBuilder_LoadFile("example1\example1.xml")
						If Not *pack
							End
						EndIf
						
						LCUI_Widget_Append(*root, *pack)
						LCUI_Widget_Unwrap(*pack)
						*btn = LCUI_LCUIWidget_GetById("btn")
						LCUI_Widget_BindEvent(*btn, "click", @OnBtnClick(), #Null, #Null)
						
						LCUI_LCUI_Main()
					CompilerCase 3
						Define.LCUI_Widget *root, *pack, *btn
						*root = LCUI_LCUIWidget_GetRoot()
						*pack = LCUI_LCUIBuilder_LoadFile("example2\example2.xml")
						If Not *pack
							End
						EndIf
						LCUI_LCUI_InitMetrics()
						LCUI_Widget_UpdateStyle(*root, #True)
						LCUI_Widget_Append(*root, *pack)
						LCUI_Widget_Unwrap(*pack)
						InitButtons()
						*btn = LCUI_LCUIWidget_GetById("btn-dpi-debug")	
						LCUI_Widget_BindEvent(*btn, "click", @OnDebugClick(), #Null, #Null)
						LCUI_LCUI_Main()
				CompilerEndSelect
		CompilerEndSelect
		
		LCUI_Close()
	EndIf
CompilerEndIf
I will create a wrapper for PB to use the XML for DialogLibrary.
Justin
Addict
Addict
Posts: 829
Joined: Sat Apr 26, 2003 2:49 pm

Re: Users complain boring user interface of my apps

Post by Justin »

Webview2 control for windows here:
viewtopic.php?f=7&t=75898
Rinzwind
Enthusiast
Enthusiast
Posts: 636
Joined: Wed Mar 11, 2009 4:06 pm
Location: NL

Re: Users complain boring user interface of my apps

Post by Rinzwind »

Fred wrote: Mon Aug 06, 2018 8:25 am
c-smile wrote:
Kukulkan wrote: But people expect it to look like this:
Image
Disclaimer: I am an author of the Sciter Engine.

As soon as Sciter is already mentioned in this discussion...

I've added recently support of Acrylic (Win) and Vibrant (Mac) theming: https://sciter.com/sciter-4-2-support-o ... c-theming/

You definitely can do such UIs with PB + Sciter bundle.

In principle, with CSS, you can tune UI style to much target platform as close as possible. Or to use Sciter's "unisex" theming, check my http://notes.sciter.com , Win/Lin/Mac screenshots are on front page. IMHO, the Notes looks pretty native on each platform despite the fact that this is completely windowless UI (GPU accelerated, dpi-aware, all that).
Thanks for your input, nice to have comment from the inside :)
2022

The GUI library is still uhm very basic and you still need a lot of API calls. I hoped Sciter would be added natively to PB. Not so.
Grid control? More properties? The only progress in PB GUI land is external: IceDesign. It will stay that way because this one-man-show can't handle the user's wishes and apparently is not looking for extra hands. Said before: this will hurt PB in the end. End drama mode. I am one that is not impressed with the C-backend (wonder if it even enable easy use of C libraries, so far not) while a lot of features and a lot of low hanging fruit is ignored. Well, I know: Take it or leave it.
Bitblazer
Enthusiast
Enthusiast
Posts: 733
Joined: Mon Apr 10, 2017 6:17 pm
Location: Germany
Contact:

Re: Users complain boring user interface of my apps

Post by Bitblazer »

A complete modern consistent UI library would be nice. Though i am not sure if it really would be usefull.

Windows users who want fancy desktops, usually use something like windowblinds.

If you need other custom or more modern and extended UI controls, you can find stuff like gauges (or mini-gauges) or look out for Thorsten's modules.

If you are a software developer, simply use the canvas gadget and go wild ;) But be aware of the downsides of skinned Apps. Some users will like it, others will hate it. With purebasic and a canvas based themed UI widget set, you have the same app look cross platform. Great for building a brand.

ps: Many years ago, i used SkinCrafter to easily do app skinning of PureBasic app's. Worked fine for me.
Last edited by Bitblazer on Mon Feb 14, 2022 11:35 am, edited 3 times in total.
webpage - discord chat links -> purebasic GPT4All
User avatar
Kukulkan
Addict
Addict
Posts: 1352
Joined: Mon Jun 06, 2005 2:35 pm
Location: germany
Contact:

Re: Users complain boring user interface of my apps

Post by Kukulkan »

Hi. I originally started this thread and I have to admit that nothing has changed. We were also looking forward to some PB sciter integration but now we gave up. Not even the PB XML Dialog engine was enhanced. In the meantime, we ported first products from PB to use go and sciter. So we are slowly leaving PB behind and going forward into using sciter with go now (also want to mention that VSCode is a great IDE for that).

But I also have to tell you that sciter is not making us happy. In the meantime I started ~65 topics and ~100 replies in the sciter forum. Many of them being bug reports. We use sciter very much and I can say that we have some experience now. First, Andrew is fixing bugs and issues quite fast and competent. But the way Andrew is providing updates to sciter is very disappointing. There is only one master branch which is used for patches, updates and new features. So there is no stable branch or similar for you to just get a patched version. You always get the newest features and bling-bling. And we experienced several updates that broke more than they fixed. Just because it also introduced new features instead of patches to bugs only.

So, finally, after every sciter-update, we needed to run the whole QA process from scratch to find out if something else is now broken. This is the reason we're currently stuck with a very old version of sciter (4.3.0.18). We will update that only if there is absolutely no way to prevent it.

I asked Andrew long ago to make some stable branch where only bugs get patched, but he denied (https://sciter.com/forums/topic/sciter- ... -branches/).
User avatar
Tenaja
Addict
Addict
Posts: 1948
Joined: Tue Nov 09, 2010 10:15 pm

Re: Users complain boring user interface of my apps

Post by Tenaja »

You two sound like ungrateful snivelers, kulkulkan and bitblazer, right about now.

My indie compiler doesn't have as many features as GitHub! Whaaa!

Well, no kidding!!! Go get some of those wrappers and convert them to pb! Don't whine and complain that Fred didn't convert YOUR favorite open source library. If its open source--make a wrapper yourself!
Post Reply