{"id":1345,"date":"2023-09-26T03:54:17","date_gmt":"2023-09-26T07:54:17","guid":{"rendered":"https:\/\/jausoft.com\/blog\/?p=1345"},"modified":"2023-09-26T04:25:39","modified_gmt":"2023-09-26T08:25:39","slug":"graphui-css-style-layout-fonts-more","status":"publish","type":"post","link":"https:\/\/jausoft.com\/blog\/2023\/09\/26\/graphui-css-style-layout-fonts-more\/","title":{"rendered":"GraphUI CSS Style Layout, Fonts & More .."},"content":{"rendered":"\r\n

Continuing the Graph Type Rendering and UI<\/a> saga with some functional updates. Here our new CSS alike Grid and Box Layout<\/a> as well a glimpse into the migrated symbol fonts via our FontView01. You may also check our Bugzilla in regards to GraphUI<\/a> or for the JOGL \/ Graph module<\/a> as well as the easier to access wiki page of ours<\/a>.<\/p>\r\n\r\n\r\n\r\n

<\/p>\r\n\r\n\r\n\r\n

Walking through the source code is pretty boring, so I will just link a few examples regarding the new layout feature<\/a> from the demo code here.<\/p>\r\n

UISceneDemo03’s right hand side group<\/a> of buttons.<\/p>\r\n\r\n\r\n

\r\n
\"\"<\/a><\/figure>\r\n<\/div>\r\n\r\n\r\n

 <\/p>\r\n

Notable some buttons contain an newly integrated symbol font<\/a>, which can be easily utilized by a Glyph name lookup<\/a> and toggle’able Button support<\/a>.<\/p>\r\n\r\n

\r\n buttonsRight.setLayout(new GridLayout(buttonWidth, buttonHeight, \r\n Alignment.Fill, \r\n new Gap(buttonHeight*0.50f, buttonWidth*0.10f), 7));\r\n {\r\n final Button button = new Button(options.renderModes, fontSymbols,\r\n fontSymbols.getUTF16String(\"play_arrow\"),\r\n fontSymbols.getUTF16String(\"pause\"),\r\n buttonWidth, buttonHeight, buttonZOffset);\r\n button.setSpacing(symSpacing, fixedSymSize);\r\n button.onToggle((final Shape s) -> {\r\n System.err.println(\"Play\/Pause \"+s);\r\n animGroup.setTickPaused ( s.isToggleOn() );\r\n if( s.isToggleOn() ) {\r\n animGroup.setTickPaused ( false );\r\n if( null != mPlayer ) {\r\n mPlayer.resume();\r\n }\r\n } else {\r\n animGroup.setTickPaused ( true );\r\n if( null != mPlayer ) {\r\n mPlayer.pause(false);\r\n }\r\n }\r\n });\r\n button.setToggle(true); \/\/ on == play\r\n buttonsRight.addShape(button);\r\n }\r\n\r\n<\/code><\/p>\r\n\r\n

\r\n
One fine Glyph bug of our Font class<\/a> has been tackled in this last round of layout work,
which actually was there all the time but somehow ignored.
The calculated bounding box of one text line was always too big,
hence a label was always positioned too low in the Button – not centered correctly.
While adding a convenient way to use toggable symbols and hence adding the option
to obey a font’s fixed em-size – this issue had to be resolved.
We used the font’s ascend for whitespace and undefined Glyphs,
which exceeds the height of used label text and hence ruined the layout. \ud83d\ude09<\/div>\r\n
\u00a0<\/div>\r\n
Test bed for the GridLayout is UILayoutGrid01<\/a>\r\n
\"\"<\/a><\/figure>\r\n

and UILayoutBox01 for the BoxLayout<\/a><\/p>\r\n

\"\"<\/a><\/figure>\r\n

The BoxLayout was mostly used to group Shapes in a box like in FontView01<\/a>, the GlyphShape and the underline box.<\/p>\r\n

\"\"<\/a><\/figure>\r\n

The underline hack is sub-optimum due to skipping center in the BoxLayout,
here is a version without it<\/p>\r\n

\"\"<\/a><\/p>\r\n

Here one more set of Demo pictures from UISceneDemo02 <\/a><\/p>\r\n

\"\"<\/a><\/figure>\r\n

… and<\/p>\r\n

\"\"<\/a><\/figure>\r\n

More updates on already checked-in code and new stuff soon …<\/p>\r\n

***<\/p>\r\n

And now .. the painful but required call for related project work, funding or otherwise.<\/p>\r\n<\/div>\r\n

\r\n
All big & medium sized firms – as well other hybrid commercial projects,
are strongly invited to contact me<\/a>\u00a0to discuss the next steps forward (if any).
I would suggest to setup meetings with their stakeholders and discuss a plan forward.

A one person full time compensation might be enough, two person support would be awesome.<\/i>
See How to pay professional maintainers<\/a>.
<\/b>

^^ this is not directed to any hobby or small-biz entity using the project,
but more so directed at whats left in the ethics department of the bigger corps & orgs :-\/
Interestingly enough, it always were the small biz corps supporting this project the most!
THANK YOU!<\/strong>
\r\n

 <\/p>\r\n<\/div>\r\n<\/blockquote>\r\n<\/div>\r\n","protected":false},"excerpt":{"rendered":"

Continuing the Graph Type Rendering and UI saga with some functional updates. Here our new CSS alike Grid and Box Layout as well a glimpse into the migrated symbol fonts via our FontView01. You may also check our Bugzilla in regards to GraphUI or for the JOGL \/ Graph module as well as the easier… Continue reading GraphUI CSS Style Layout, Fonts & More ..<\/span> →<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[7,3,8,1],"tags":[9,13,22,71,16,44,17,46,68],"class_list":["post-1345","post","type-post","status-publish","format-standard","hentry","category-3d-opengl","category-computer-stuff","category-jogamp","category-uncategorized","tag-3d","tag-embedded-device","tag-fonts","tag-graph_type_rendering","tag-java","tag-jogamp","tag-opengl","tag-openjdk","tag-type-rendering"],"_links":{"self":[{"href":"https:\/\/jausoft.com\/blog\/wp-json\/wp\/v2\/posts\/1345","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jausoft.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jausoft.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jausoft.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/jausoft.com\/blog\/wp-json\/wp\/v2\/comments?post=1345"}],"version-history":[{"count":19,"href":"https:\/\/jausoft.com\/blog\/wp-json\/wp\/v2\/posts\/1345\/revisions"}],"predecessor-version":[{"id":1372,"href":"https:\/\/jausoft.com\/blog\/wp-json\/wp\/v2\/posts\/1345\/revisions\/1372"}],"wp:attachment":[{"href":"https:\/\/jausoft.com\/blog\/wp-json\/wp\/v2\/media?parent=1345"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jausoft.com\/blog\/wp-json\/wp\/v2\/categories?post=1345"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jausoft.com\/blog\/wp-json\/wp\/v2\/tags?post=1345"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}