Re: Users complain boring user interface of my apps
Posted: Thu Dec 12, 2019 12:22 pm
B4Jthe.weavster wrote:JVM
Java
http://www.purebasic.com
http://forums.purebasic.com/english/
B4Jthe.weavster wrote:JVM
Java
Exactly what I did for my commercial project: PureBasic Server and Client with all GUI in a WebGadget.IdeasVacuum wrote:It should be possible to write your GUI in HTML and CSS, displayed via a WebGadget.
Uh... this looks nice... and is really small (1,7MB x64 / 349KB x86).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
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;
}
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>
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
2022Fred wrote: ↑Mon Aug 06, 2018 8:25 amThanks for your input, nice to have comment from the insidec-smile wrote:Disclaimer: I am an author of the Sciter Engine.Kukulkan wrote: But people expect it to look like this:
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).