I have compiled yours examples successfully. To avoid issues with finding units, I have placed all files from Src to The folder with LTR units from PAS2jS. Code also work. I will study yours unit. Sure, I know, that there are no so much object types like in HTMlwidgets unit. But for beginning, it is good for testing.
What will happen if I will not add object position values in some cases when this value is expected?
Mailing lists / pas2js / 2020-10
Nyx framework
11 messages · 2 people · –
- Mgr. Janusz Chmiel 7
- mister highball 4
Reply by email Subscribe to this list Your subscription
Read-only archive. Use j and k to move between messages.
Dear MR highball,
Please could you add yours samples to The Nyx Github repo so all source files could be normally loaded by using git clone? When I have followed yours links to download The samples, It open WeB interface, and rav button open source code. But it would be very confort if you would try to add those samples to The Github repository with Nyx framework.
Fortunately The GUI which is being produced by yours units are fully accessible with screen readers similarly like GUI which have been created thanks to htmlwidgets.
Yes all the sample code listed were just links inside of the repo to a particular line of source. The repo can be cloned using the below command
Git clone https://github.com/mr-highball/nyx --recursive
The recursive flag will pull the submodule too (just some css used in the tester application) In the nyx_browser_test.lpr starting at line 158 in method forum, you can comment out the different samples procedures. ________________________________
Earlier message 240 lines
From: Pas2js on behalf of
Sent: Friday, October 2, 2020 3:55:10 PM
To:
Subject: Pas2js Digest, Vol 32, Issue 4
Send Pas2js mailing list submissions to
To subscribe or unsubscribe via the World Wide Web, visit
https://lists.freepascal.org/cgi-bin/mailman/listinfo/pas2js
or, via email, send a message with subject or body 'help' to
You can reach the person managing the list at
When replying, please edit your Subject line so it is more specific
than "Re: Contents of Pas2js digest..."
Today's Topics:
1. Re: html widgets layout question (Michael Van Canneyt)
2. Re: html widgets layout question (heliosroots)
3. Nyx framework (Mgr. Janusz Chmiel)
4. Re: html widgets layout question (Michael Van Canneyt)
5. Re: html widgets layout question (mister highball)
6. Re: Nyx framework (Mgr. Janusz Chmiel)
7. Re: html widgets layout question (Mgr. Janusz Chmiel)
8. plea for simple code which show text in web page notification
area (Mgr. Janusz Chmiel)
9. empty paragraph creation (Mgr. Janusz Chmiel)
----------------------------------------------------------------------
Message: 1
Date: Fri, 2 Oct 2020 18:19:06 +0200 (CEST)
From: Michael Van Canneyt
To: pas2js discussions
Subject: Re: [Pas2js] html widgets layout question
Message-ID: <alpine.DEB.2.21.2010021815420.25499 at home>
Content-Type: text/plain; charset=US-ASCII; format=flowed
On Fri, 2 Oct 2020, heliosroots wrote:
> There should be a more simplified way of handling this at TcustomWidget ....
> example:
>
>
> Widget.Classes := Widget.AddClasses('MyClass1 MayClass2'');
> Widget.Classes := Widget.RemoveClasses('MyClass1 MayClass2'');
>
> it would be simpler just ...
>
> Widget.AddClasses('MyClass1 MayClass2'');
> Widget.RemoveClasses('MyClass1 MayClass2'');
Indeed. I will change the implementation.
Michael.
------------------------------
Message: 2
Date: Fri, 2 Oct 2020 09:26:13 -0700 (MST)
From: heliosroots
To:
Subject: Re: [Pas2js] html widgets layout question
Message-ID:
Content-Type: text/plain; charset=us-ascii
How to change the attribute of the "element" in the Widget layer? example the
attribute "aria" would have a direct support for the visually impaired
--
Sent from: http://pas2js.38893.n8.nabble.com/
------------------------------
Message: 3
Date: Fri, 2 Oct 2020 18:40:28 +0200
From: "Mgr. Janusz Chmiel"
To: "'pas2js discussions'"
Subject: [Pas2js] Nyx framework
Message-ID: <CB6438DE97194BD0AB8F94C7E60CCC8A at DESKTOPN6LG1HQ>
Content-Type: text/plain; charset="us-ascii"
I have compiled yours examples successfully. To avoid issues with finding
units, I have placed all files from Src to The folder with LTR units from
PAS2jS. Code also work. I will study yours unit. Sure, I know, that there
are no so much object types like in HTMlwidgets unit. But for beginning, it
is good for testing.
What will happen if I will not add object position values in some cases when
this value is expected?
------------------------------
Message: 4
Date: Fri, 2 Oct 2020 18:59:48 +0200 (CEST)
From: Michael Van Canneyt
To: pas2js discussions
Subject: Re: [Pas2js] html widgets layout question
Message-ID: <alpine.DEB.2.21.2010021857320.26529 at home>
Content-Type: text/plain; charset=US-ASCII; format=flowed
On Fri, 2 Oct 2020, heliosroots wrote:
> How to change the attribute of the "element" in the Widget layer? example the
> attribute "aria" would have a direct support for the visually impaired
Locally I already have a 'ApplyAttribute' call.
(after mr. Chmiel asked for Aria support I added that) but I didn't commit this yet.
Michael.
------------------------------
Message: 5
Date: Fri, 2 Oct 2020 17:02:17 +0000
From: mister highball
To: ""
Subject: Re: [Pas2js] html widgets layout question
Message-ID:
Content-Type: text/plain; charset="utf-8"
Under the hood for all nyx browser elements css is used for placement but the choice to provide some srandard mechanisms versus using straight css is that nyx is a UI framework that is meant to be a simple interface for web development AND desktop development. Ie. A nyx button when compiled for desktop will use a standard lcl button but for browser will use a standard web button element. Because of this the interface for controlling sizing and positioning needs to be simple to work for both targets.
I like fluent interfaces which is why I incorporated that throughout, however it's not a required thing to use it that way.
I also like being able to see all UI code changes in git diffs clearly vs an ide managed solution to better understand what has been done from commit to commit.
Ultimately, just another option to use (and a fun side project for me)
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.freepascal.org/pipermail/pas2js/attachments/20201002/a7e54c05/attachment-0001.htm>
------------------------------
Message: 6
Date: Fri, 2 Oct 2020 19:34:19 +0200
From: "Mgr. Janusz Chmiel"
To: "'pas2js discussions'"
Subject: Re: [Pas2js] Nyx framework
Message-ID: <73CA0E36B5334AEC9B1265A2B436B10C at DESKTOPN6LG1HQ>
Content-Type: text/plain; charset="us-ascii"
Dear MR highball,
Please could you add yours samples to The Nyx Github repo so all
source files could be normally loaded by using git clone?
When I have followed yours links to download The samples, It open WeB
interface, and rav button open source code. But it would be very confort if
you would try to add those samples to The Github repository with Nyx
framework.
Fortunately The GUI which is being produced by yours units are fully
accessible with screen readers similarly like GUI which have been created
thanks to htmlwidgets.
------------------------------
Message: 7
Date: Fri, 2 Oct 2020 21:27:01 +0200
From: "Mgr. Janusz Chmiel"
To: "'pas2js discussions'"
Subject: Re: [Pas2js] html widgets layout question
Message-ID: <F2E12B5AC7D64C5EB301B805D187C0DD at DESKTOPN6LG1HQ>
Content-Type: text/plain; charset="us-ascii"
I have found out The brilant solution. NVDA screen reader which I Am using
support special mode. Where every WEB page GUi element can be placed on A
separate virtual line. By other word, mode which ignore original WEB page
layout. So I can perfectly use HTMLwidgets.
I will have a intensive Pascal week end to finally deeply understand The
structure of Pascal sources which uses HTMlwidget unit.
Thanks to NVDA default mode which represent The WEB page original layout I
can know how WEB page really looks for sighted users.
And to have my life more simple, I can switch to The disable display WEB
page like on A screen mode. Thank all of you for yours patience.
------------------------------
Message: 8
Date: Fri, 2 Oct 2020 21:30:30 +0200
From: "Mgr. Janusz Chmiel"
To: "'pas2js discussions'"
Subject: [Pas2js] plea for simple code which show text in web page
notification area
Message-ID: <AF57489F348C464BAF3AA32DDA0FC778 at DESKTOPN6LG1HQ>
Content-Type: text/plain; charset="us-ascii"
WEB notification area is being videly used by many modern pages. This
approach could be even used to inform user if some question have been
answerred correctly with no need to add some text as A first line of textual
block or with no need to use windowalerd procedure.
The question is, if somebody kind in this mailing list would be so positive
and kind and if this human being would have some time to create simple .lpr
file which used htmlwidgets unit to display some text in The WEB
notification area?
Thank you very very much for yours help.
------------------------------
Message: 9
Date: Fri, 2 Oct 2020 21:55:09 +0200
From: "Mgr. Janusz Chmiel"
To: "'pas2js discussions'"
Subject: [Pas2js] empty paragraph creation
Message-ID: <ED49D45917F44F0B959CE7FA2F4730D0 at DESKTOPN6LG1HQ>
Content-Type: text/plain; charset="us-ascii"
Is it possible to create empty paragraph by using HTMLwidgets unit? To make
empty paragraph which could serve as a divider character between last line
which have been written by using writeln procedure for example?
Do not be afraid, this is my last question for this day.
------------------------------
Subject: Digest Footer
I have used yours cloning command. But I have found out strange issue. Screen reader do not show any GUi when I have opened C:\nyx\test\nyx_browser_test.html
No button, no strange issue.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.freepascal.org/pipermail/pas2js/attachments/20201003/fcd9f4e8/attachment.htm>
Make sure you compile the project first since the gui components will only show with the compiled javascript present. Also make sure one of the methods (starting at line 158 of the project) are uncommented (example BuildUi or one of the "simple test" methods).
________________________________
Earlier message 48 lines
From: Pas2js on behalf of
Sent: Saturday, October 3, 2020 6:00:01 AM
To:
Subject: Pas2js Digest, Vol 32, Issue 6
Send Pas2js mailing list submissions to
To subscribe or unsubscribe via the World Wide Web, visit
https://lists.freepascal.org/cgi-bin/mailman/listinfo/pas2js
or, via email, send a message with subject or body 'help' to
You can reach the person managing the list at
When replying, please edit your Subject line so it is more specific
than "Re: Contents of Pas2js digest..."
Today's Topics:
1. Re: Nyx framework (Mgr. Janusz Chmiel)
----------------------------------------------------------------------
Message: 1
Date: Sat, 3 Oct 2020 09:48:52 +0200
From: "Mgr. Janusz Chmiel"
To: "'pas2js discussions'"
Subject: Re: [Pas2js] Nyx framework
Message-ID: <A65A9CE897F04CF191639E20CA0EDDDB at DESKTOPN6LG1HQ>
Content-Type: text/plain; charset="utf-8"
I have used yours cloning command. But I have found out strange issue.
Screen reader do not show any GUi when I have opened
C:\nyx\test\nyx_browser_test.html
No button, no strange issue.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.freepascal.org/pipermail/pas2js/attachments/20201003/fcd9f4e8/attachment-0001.htm>
------------------------------
Subject: Digest Footer
How complex would be to extend yours units so labels could be added to every editable field?
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.freepascal.org/pipermail/pas2js/attachments/20201006/d5b76e6d/attachment.htm>
How complex would be to extend yours units so > labels could be added to every editable field?
Would be simple, I'll put together an example for you and reply when I have it
cheers 🍻,
-highball
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.freepascal.org/pipermail/pas2js/attachments/20201008/6c660088/attachment.htm>
Thank you very much. I Am always using The latest Pas2JS compiler from trunk branch.
This compiler and units have allowed Me to finally create quiz which can monitor even 40 editable fields at The same time. The advantage of this approach is, that it is not necessary to fill out questions chronologically. Respondent can decide The order. Respondent is not being forced to confirm The right answer by using some confirmation button or by even pressing Enter key.
It is excellent dynamic process. Even screen readers are not negatively slow down by The fact, that Javascript code monitor so many fields at The same time.
It is even possible to use Pascal language to play live MP3 streams. It is miracle algorithm. Because it is possible to create apps from live Internet radio players to complex WEB applications.
Really I Am very very haapy thanks to Pas2jS and useful units, which extends its usability to create really professional WEB apps. I like build in run-time engine, which can inform in The case of some error. -------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.freepascal.org/pipermail/pas2js/attachments/20201008/61db2af5/attachment.htm>
I would never been able to create quizes without The working code from MR suziau. MR Jean Suziau. Thanks to his routine, code can be very simple. It have not been necessary to declare new variable for every editable field. If I would not login to this mailing list, my dream could never come true.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.freepascal.org/pipermail/pas2js/attachments/20201008/568a3360/attachment.htm>
Thank you very much. I Am always using The latest Pas2JS compiler from trunk branch. This…
Thank you very much for yours sample code. If I understand it right. When i would want to use this framework to get text from some inputboxes, it is also necessary to use some event procedure. And function gettext may be return text from inputbox value.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.freepascal.org/pipermail/pas2js/attachments/20201010/3d5b0f37/attachment-0001.htm>
Thank you very much for yours sample code. If I understand it right. When i would want to use this framework to get text from some inputboxes, it is also necessary to use some event procedure. And function gettext may be return text from inputbox value.
You wouldn't necessarily have to use events, that is just one way. You could loop through a container's Elements collection and get the text from there, but I've updated my demo to include a debug text box which shows how you can get all of the text at once when any of the inputs change.
I've also added 3 methods showing one way to capture this text,
(*
this method will take TStrings (TStringList or other) and fill
it up with "question" and "answer". The "question" will be stored
in the "name" and the "answer" will be stored as a value
*)
procedure AllInputTextToStrings(const AContent : TStrings); (*
this method will return a single string with the question following
by an answer. an optional question separator string can be used
but will default to separate with a hyphen
*)
function AllInputTextToString(const AQuestionSeparator : String = '-') : String;
(*
returns all of the inputs content without including the question as
a single string
*)
function AllInputContentOnlyToString : String;In the "BuildUI" method, I've hooked up observation methods for when the inputs' text changes (this line here)
.ForEach(@AddTextChangeObserverToInputs);The AddTextChangeObserverToInputs shows how one could attach a handler to respond when a user makes a change (this will trigger on every key up). In my demo the observer will just set the debug text to all the questions and the current answer, but you can attach as many different observers to property changes as you would like.
When doing this demo I had to also fix some bugs found, so just re-pull the repo and you'll have working code.
Again, this demo is found here
https://github.com/mr-highball/nyx/tree/master/demos/browser/input-labels
Hope this helps, and if you need to reach out via personal email feel free. -------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.freepascal.org/pipermail/pas2js/attachments/20201010/11465618/attachment-0001.htm>