ICONS

A place to discuss and plan OpenSource xTalk (not exclusively LCC based)
and Community Builds of LCC ...Ask NOT what xTalk can do for you...
Get involved you DO have something to contribute, no matter your skillset!

Forum rules
A place to discuss and plan OpenSource xTalk (not exclusively LCC based) and Community Builds of LCC
Ask NOT what xTalk can do for you... get involved you DO have something to contribute, no matter your skillset!
xAction
Posts: 282
Joined: Thu Sep 16, 2021 1:40 pm
Contact:

ICONS

Post by xAction »

So the Widget icons are made from a font and the font license seems to imply we have to keep the font as a font?

The widget icons don't match the general UI icons and those icons look different on each platform so maybe we start from scratch? Or We adopt a new GUI framework that has goodies built in if we can get the source code to build.

I intended to start listing all the things we need icons for but found this on the way:

google material design icons
That's Apache 2.0 licensed

And then I got distracted by frameworks and failing to build C++ projects ...and now I'm tired out, so I'll get to listing all the icons we need later on. Maybe you'll find them all in the above icons before I get back.
User avatar
richmond62
Posts: 2617
Joined: Sun Sep 12, 2021 11:03 am
Location: Bulgaria
Contact:

Re: ICONS

Post by richmond62 »

those icons look different on each platform
Well, starting with the 'aqua' icons on MacOS, obviously LiveCode central had the reasonably laudable
idea of making LC icons be vaguely congruent with the look-and-feel of each operating system
(though, of course, with Linux in all its manifestations that was a busted flush from the word go).

Whether that is strictly necessary, or even desirable for OpenXTalk is open to question.

Personally I would not go down that alley as it will involve an awful lot of work, and I believe
there is a lot to be said for a consistent GUI for OpenXTalk regardless of what operating
system it is running on.
https://richmondmathewson.owlstown.net/
xAction
Posts: 282
Joined: Thu Sep 16, 2021 1:40 pm
Contact:

Re: ICONS

Post by xAction »

I think the Apple thing is probably Apple Human Interface Design Guidelines.
When Steve was around you didn't want to piss him off making a non Mac gui. He'd kick you out of Macworld or something.
Revolution/Livecode for WIndows & Linux was a business opportunity not work of passion.

Back in early 2000s developers worked hard to get a chance to be on that Macworld stage and win an Apple design award.
Couldn't even get concidered with a non standard mac user interface.

What was that MP3 player we had back in the end of the 90s?
The Developer didn't want to change the UI, make it unskinnable, skinning MP3 players was all the rage then.
So instead of paying that guy millions of dollars Steve just had iTunes made.

If this is what the Mac looks like now, then they made it easy for us.
User avatar
richmond62
Posts: 2617
Joined: Sun Sep 12, 2021 11:03 am
Location: Bulgaria
Contact:

Re: ICONS

Post by richmond62 »

There's something a bit 'funny' about that web page:

https://www.conceptdraw.com/solution-pa ... -interface

"macOS 10.12 Sierra" 8-)
https://richmondmathewson.owlstown.net/
xAction
Posts: 282
Joined: Thu Sep 16, 2021 1:40 pm
Contact:

Re: ICONS

Post by xAction »

Icons to recreate/find:

Button
checkbox
menu
radiobutton
standard
rectangle
default
tab panel

Field
Label
Input
Edit
List
Table
Data Grid

Graphic
curve
line
oval
polygon
rectangle
regular
roundrect
line
pencil
bucket
line size

Media
Image
Player

Menus
Option
Pulldown
Combo Box
Popup

Scrollbars
progress
scale <-- No Tooltip
slider <-- has Tooltip
little arrows
scrollbar

Some widgets might be user made
Widget
Browser
SVG Import
Switch Button
Tree View
Segmented Control
Navigation Bar
Line Graph
Header Bar
Clock (why)
Spinner
iOS Native Button
Mac Native Button
Mac Naitve Single Line Field
Android Native Button
Android Native Field
Gradient Slider
Tile

Think that's it.
Current SVG Widgets like "Tile" change icons based on the icon names available via iconNames() function
There doesn't seem anyway of changing this data and it appears to be coming from the "glyphicons-halflings-regular.svg" font, which isn't mentioned in svgFontName documentation.
User avatar
richmond62
Posts: 2617
Joined: Sun Sep 12, 2021 11:03 am
Location: Bulgaria
Contact:

Re: ICONS

Post by richmond62 »

Unzip and enjoy. :?

Personally I'd greyScale the Linux icons and use them across all platforms.
Attachments
themes.zip
(440.83 KiB) Downloaded 284 times
https://richmondmathewson.owlstown.net/
xAction
Posts: 282
Joined: Thu Sep 16, 2021 1:40 pm
Contact:

Re: ICONS

Post by xAction »

Didn't I suggest that two days ago?
User avatar
OpenXTalkPaul
Posts: 1485
Joined: Sat Sep 11, 2021 4:19 pm
Contact:

Re: ICONS

Post by OpenXTalkPaul »

xAction wrote: Sat Nov 20, 2021 5:48 pm I think the Apple thing is probably Apple Human Interface Design Guidelines.
Yeah Steve Jobs was a bit of a control freak for design aesthetic, but obviously he knew how to make a product appealing to the general public, which definitely turned that company around.

It's been said he also didn't like HyperCard because he didn't like all the amateurs making software with amateur quality UI.
What was that MP3 player we had back in the end of the 90s?
The Developer didn't want to change the UI, make it unskinnable, skinning MP3 players was all the rage then.
So instead of paying that guy millions of dollars Steve just had iTunes made.
Not sure, WinAMP was very popular.

I had several mp3 players on classic macOS, VAMP for mac was small and fast, but I really liked simple yet powerful SndApp as my favorite, it could handle decoding mp3s even on my early 90s 60MHz PowerMac 6100s (60MHz PPC 601 CPU, I had 3 of them hooked to a KVM switch box).

Cassidy and Greene's SoundJam was the skinble mp3 player app that Apple purchased and then rebranded as iTunes.
User avatar
OpenXTalkPaul
Posts: 1485
Joined: Sat Sep 11, 2021 4:19 pm
Contact:

Re: ICONS

Post by OpenXTalkPaul »

xAction wrote: Sat Nov 20, 2021 1:44 pm So the Widget icons are made from a font and the font license seems to imply we have to keep the font as a font?
The IDE uses SVG paths taken from FontAwesome, probably from the free GPL set of icons, which is all available including as SVG files on their GitHub Repo. FontAwesome has a seperate version with many more vector icons that available for commercial licensing. The FontAwesome Font is actually included in the IDE as an OTF Font, as well as being in an LCB SVG Library format. There's also another Icon Font file in the IDE sensibly named IDE.otf, in addition to including SourceCodePro.otf fonts.
The widget icons don't match the general UI icons and those icons look different on each platform so maybe we start from scratch? Or We adopt a new GUI framework that has goodies built in if we can get the source code to build.
Yes in another thread I mentioned this, I want to replace those tools palette classic controls icons with platform generic SVG versions. Apple has some nice useful UI icon fonts too, but that's only Licensed for software on Apple platforms.
Liberal Apache licensed Google Material (Android UI) is best our bet here, but I didn't find suitable SVG Icons, but I will make my own if need be.

We most certainly do have the source code for the tools palette (for everything about LCC). Tools palette is built on the fly from a Script-only revTool.livecodescript, and I've already been messing with it, working out how to theme it for darkMode.
xAction
Posts: 282
Joined: Thu Sep 16, 2021 1:40 pm
Contact:

Re: ICONS

Post by xAction »

Cassidy and Greene's SoundJam was the skinable mp3 player app that Apple purchased and then rebranded as iTunes.
Oh I heard a totally different story decades ago. But yeah SoundJam was made immortal.

Glyphicons-halflings-regular.svg is used in the documentation.
Found here : "~/LiveCode Community 9.6.1\Documentation\html_viewer\fonts\glyphicons-halflings-regular.svg"
I thought that was the source of icons but apparently not.

And that FontAwesome .lcb is where we are pulling results from iconNames() function?
User avatar
OpenXTalkPaul
Posts: 1485
Joined: Sat Sep 11, 2021 4:19 pm
Contact:

Re: ICONS

Post by OpenXTalkPaul »

Current SVG Widgets like "Tile" change icons based on the icon names available via iconNames() function
There doesn't seem anyway of changing this data and it appears to be coming from the "glyphicons-halflings-regular.svg" font, which isn't mentioned in svgFontName documentation.
It's a Builder library, that returns SVG data for a key name parameter that must be passed to it (the icon's name, used as a array key). iconNames() returns a list of array elements in that library, which get used to retrieve the SVG data.

Widgets can have their own SVG Icon data embedded into them as a Metadata tag ( = SVGPath) that gets extracted and inserted into the tools palette when a Widget is loaded (but can also be hidden from the tools palette via other metadata).

I want ALL of the Icons to be vector based, to make the whole thing resolution independent and easier to change foreground/background Color on-the-fly (useful for darkMode or otherwise theming the IDE)
User avatar
richmond62
Posts: 2617
Joined: Sun Sep 12, 2021 11:03 am
Location: Bulgaria
Contact:

Re: ICONS

Post by richmond62 »

I want ALL of the Icons to be vector based
Aha: so people who are not so good visually can enlarge the Toolbar?

I am quite sure there are FREE (Open Source or otherwise) Vector images for "all those things"
available on the internet: 'simply' a matter of finding them. :(

https://www.flaticon.com/free-icons/open-source

https://akveo.github.io/eva-icons/#/

https://www.svgrepo.com/

https://cssauthor.com/open-source-icons ... evelopers/
https://richmondmathewson.owlstown.net/
xAction
Posts: 282
Joined: Thu Sep 16, 2021 1:40 pm
Contact:

Re: ICONS

Post by xAction »

Trick is it needs to be a consistant style.

If we create our own, which I'm not in the mood to do at all, but if someone were to do that, then that person could also post that to those sites and sell a license for some fee and maybe raise a little money for the project on the rare occasion someone buys the icons/font. Or it could be used as marketing anchor where if a random stranger finds the icons/font and it's called OpenXTalk_UIX or such with CC Attribution license then OpenXTalk would have to get mentioned where ever those icons are used.
With a set of our own we could insert OpenXtalk into Unity, Godot , & Unreal, asset stores and even on Steam as a developer asset simply to create brand recognition.

The more places we have a footprint, the more search engine hits we get.

Of course finding a bunch of consistant icons was idea behind this thread. Unleash the hounds, the Icon hunt is on!
User avatar
OpenXTalkPaul
Posts: 1485
Joined: Sat Sep 11, 2021 4:19 pm
Contact:

Re: ICONS

Post by OpenXTalkPaul »

Yes, that's a good idea, good with adding a set of custom OXT SVG Icons paths, a vector "minimum Xtalk reference level" Classic Control icon set, with all the basics, fld, popup menu, radio btn, checkbox, etc. as well more new ones used fo things like "Send to back" or "Align to stack center" in custom palette... whatever we need. I had planned to do that for musical notation symbols as SVG library, for the OXT music-kit.

I like making vectors and getting them down to as few paths and points as possible.
User avatar
astu
Posts: 31
Joined: Fri Nov 26, 2021 7:34 pm
Location: Germany
Contact:

Re: ICONS

Post by astu »

If I may bring Fontawesome into play here?

This is already used in LC. and there would be nothing against it if this will continue to be used...

Only possibly a more current version than the one stored in LC...

https://fontawesome.com/v5/cheatsheet
GitHub: https://github.com/Hoerwi

Image
User avatar
OpenXTalkPaul
Posts: 1485
Joined: Sat Sep 11, 2021 4:19 pm
Contact:

Re: ICONS

Post by OpenXTalkPaul »

astu wrote: Sat Dec 25, 2021 10:04 am If I may bring Fontawesome into play here?

This is already used in LC. and there would be nothing against it if this will continue to be used...

Only possibly a more current version than the one stored in LC...

https://fontawesome.com/v5/cheatsheet
Sure, if there's a symbol included in the free font-awesome set that isn't already being used then we can use it, the problem is I didn't find suitable icons for what I was looking for in that set. There is also Google's Material Design vectors we can use. I enjoy creating them myself as well.
User avatar
OpenXTalkPaul
Posts: 1485
Joined: Sat Sep 11, 2021 4:19 pm
Contact:

Re: ICONS

Post by OpenXTalkPaul »

Here's an SVG icon I did intended to be used for a package or resource, HEAVILY inspired by the Mac classic ResEdit app's Icon. Could use some more work, even the line weights for the outlines.
Screen Shot 2021-12-26 at 4.42.41 PM.png
Screen Shot 2021-12-26 at 4.42.41 PM.png (22.06 KiB) Viewed 9398 times
User avatar
richmond62
Posts: 2617
Joined: Sun Sep 12, 2021 11:03 am
Location: Bulgaria
Contact:

Re: ICONS

Post by richmond62 »

This leads me to a blank browser page:

https://fontawesome.com/v5/cheatsheet

IFF fontawesome is open source then we can hack it to blazes with a font editor.

Mind you, we could, just as easily, start with a blank font and bung whatever we wanted into it.
https://richmondmathewson.owlstown.net/
User avatar
OpenXTalkPaul
Posts: 1485
Joined: Sat Sep 11, 2021 4:19 pm
Contact:

Re: ICONS

Post by OpenXTalkPaul »

richmond62 wrote: Wed Dec 29, 2021 9:35 am This leads me to a blank browser page:

https://fontawesome.com/v5/cheatsheet

IFF fontawesome is open source then we can hack it to blazes with a font editor.

Mind you, we could, just as easily, start with a blank font and bung whatever we wanted into it.
It definitely is "open source" developed on GitHub, but I believe "Font Awesome" is actually sort of dual licensed, a free Creative Commons licensed font along with a pay-for "Pro" version. We certainly can use any of the regular CCL version at least, which LCC already did use, along with others. If you look through the IDE you will find a font called ide.otf which appears to be a custom font with icons that I'm guessing are from multiple sources.

The problem is that FontAwesome didn't have icons that I found suitable for what I needed.
So I decided to do a vectorize a basic "OXT Hyper Icons" set as line-art, in highly optimized SVG Path strings.
My thinking is this would grow to include all of the (currently bitmap images) revTools classic controls, paint/graphical controls, align/distribute, dictionary, start center, resource center, downloads, package management icons, player controls icons (Play, Pause, Stop, Rewind, Jump to Start, etc.), hourglass 'sprite', counting fingers (homage to HyperCard, maybe a Bill Atkinson icon too), maybe a middle-finger jut for fun, musical notation symbols, a full set of General MIDI 127 Instrument plus drum icons as well), and anything else anyone needs, perhaps taking requests (For funding donations? I mean, we at least need to retain this domain name).

I've since found a few other useful Creative Commons or otherwise compatible licensed icon fonts (I'm not tryna reinvent the wheel here):
CoreUI - https://icons.coreui.io/icons/
Linea.is - https://www.linea.is/_previews/linea_software_1.0.jpg
Search: https://iconscout.com/free-icons
Lots of Logos: https://simpleicons.org
Good stuff:
https://www.elegantthemes.com/blog/free ... tyle-icons
https://www.elegantthemes.com/blog/reso ... ur-website
Google's Material Icons really fills most needs I should think.
https://fonts.google.com/icons?selected=Material+Icons

There's really no shortage of vector line-art source materials for most things apps generally would need, but there might be a few that are OXT/xTalk/IDE specific enough (for example an icon appropriate for a "label field") or that otherwise warrant some customization / optimization (I like to get down to as small as possible of SVG Path string length). It's mostly a matter of making sure they fit together as a cohesive set, such as ensuring similar line weights, so you don't have an icon with thin lines next to one with thinker lines.
User avatar
OpenXTalkPaul
Posts: 1485
Joined: Sat Sep 11, 2021 4:19 pm
Contact:

Re: ICONS

Post by OpenXTalkPaul »

I think the pict on the right is the original HyperCard 1.0 tools palette.
The pict on the left is my current revTools modded-in-memory palette.
These rest are all SVG Strings in the SVG Widget.
Screen Shot.png
Screen Shot.png (214.81 KiB) Viewed 9253 times
Post Reply

Who is online

Users browsing this forum: No registered users and 3 guests