IDE Suggestions

[TerryL]

To Paul: Here are the private drafts you wanted for review and more IDE suggestions. Thanks for evaluating. Great Work.

IDE Suggestions.
1) The find/replace and project browser window heights are initially too large, extending beyond the bottom of small screens. Temporarily fix: resize in msg box: set the height of the mouseStack to "450". Project browser remembers new size, but find/replace reverts back to original size at the next restart.
2) The menu bar extends off the right edge of the screen, but can still file > exit. Maybe shorten.
3) The message box blue hilite makes the colored text difficult to read. Maybe the hilite color could be lightened for easier reading.
4) Rename menuItem to: object > remove group (from card) and > place group (on card), to make action clearer.

[OpenXTalkPaul]

Hello Terry
Thanks again for the suggestions...

To Paul: Here are the private drafts you wanted for review and more IDE suggestions. Thanks for evaluating. Great Work.

IDE Suggestions.
1) The find/replace and project browser window heights are initially too large, extending beyond the bottom of small screens. Temporarily fix: resize in msg box: set the height of the mouseStack to "450". Project browser remembers new size, but find/replace reverts back to original size at the next restart.
2) The menu bar extends off the right edge of the screen, but can still file > exit. Maybe shorten.

So these must be related to default size & position settings which are not good for certain smaller size monitors.
The minimum screen size requirement for v9.x is 1024×768 or larger monitor. I remember having issues using an old "NetBook" (remember that craze?) that had a screen that was 1024×600, very frustrating! I am willing to take a look into this to see about tweaking those settings but what size/resolution monitor are you experiencing this on, so I can set my video setting for the same to see the problem?

3) The message box blue hilite makes the colored text difficult to read. Maybe the hilite color could be lightened for easier reading.

The default highlight color for OXT has already been changed to a lighter-purple (red-blue) like in the icon. On macOS the default default highlight color is the macOS system setting's highlight color, which seems to be used when some explicit property is missing in the IDE or current Stack. This could be made into a settable preference, I already know where the colors are set is in the IDE startup process.

4) Rename menuItem to: object > remove group (from card) and > place group (on card), to make action clearer.

Easy enough to do. I've already modified a few things in the menus, particularly Help menu (unbranding) and I also added control-shift-N (command-shift-N on mac) for "New Stack" for example. My only concern with renaming menu items is that I'm not 100% sure if this could break anything else, such as an IDE plug-in that uses a doMenu or something that looks for a specific menu item by name.

[TerryL]

To Paul. If no changes requested then here are the private final drafts. Thanks.

Yes, I use a small monitor, I think 1024x600. Great solution ideas. Terry

[richmond62]

I deploy the IDE to machines attached to 1024 x 768 monitors\
for teaching purposes.

For my own development purposes I work on something rather more generous
but develop on the basis that end-users will have 1024 x 768 monitors,

[OpenXTalkPaul]

To Paul. If no changes requested then here are the private final drafts. Thanks.

Yes, I use a small monitor, I think 1024x600. Great solution ideas. Terry

I think a lot of this stuff is great. I really like the stack full of demonstrations as a way for new users to explore the features available and as a reference for existing users. My issues with these are mostly aesthetics. I would like to formulate some sort of plan for what we should add as far as integrating new lessons and demos. I do think it's best to detach from any reliance on online resources all together if possible, particularly resources maintained by the ex-mothership.

In between continuing work on un-branding and looking closer at problems with the Linux build, I've also been working on a new Start Center stack that gives a quick primer with the very basic basics of development, adding new links to the demo stacks that are already in the IDE (some of which, such as the Balloon game demo, seem to have been abandon). I've also been looking at some really old HyperCard and MetaCard OS IDE stacks and documentation to see if there's anything unique there worth updating and reusing.

There was an neat new-ish guided tutorial system added to the IDE a few years back, that seems to have largely been forgotten. It has its own syntax which is documented.

It looks like this:

Code: Select all

tutorial "Hello World"

prologue
	The first thing you learn to do in an programming language is how to say "Hello World."
	
	In this tutorial we'll do just that.
end prologue

step "Create Mainstack"
	Click on the File menu, and select New Stack > Default Size
action
    -- Give the user a visual hint of where they should be clicking
    highlight menu item "New Stack" of menu "File"
    -- The tutorial scripts only act on 'captured' object - this will cause the next created stack
    -- to be internally tagged as 'Mainstack' so it can be referenced in the rest of the tutorial
    capture the next new stack as "Mainstack"
    -- Wait until there is a captured stack with tag "Mainstack"
    wait until there is a stack "Mainstack"
    -- Advance to another step
    go to step "Create Hello Button"
end step

step "Create Hello Button"
    Drag out a button from the Tools palette onto your stack. We will use this to respond with "Hello World" when the user clicks the button.
action
    highlight tool "Create Button"
    capture the next new button of stack "Mainstack" as "Hello Button"
    wait until there is a button "Hello Button"
    go to step "Set Hello Button Area"
end step

step "Set Hello Button Area"  
    Resize and position the button field at the bottom of the stack as shown.
action
    add guide "Area" with rect "142,180,224,203" to stack "Mainstack"
    highlight guide "Area"
    wait until button "Hello Button" fits guide "Area" with tolerance 5
    go to step "Set Hello Button Properties"
end step

step "Set Hello Button Properties"
    Double click on the button to display its properties in the property inspector.
action
    highlight button "Hello Button"
    wait until there is an inspector for button "Hello Button"
    go to step "Set Hello Button Name"
end step

step "Set Hello Button Name"
    We're going to set the name propety of the button to "Hello", this will dsiplay the word "Hello" on the button.
action
    highlight property "name" of section "Basic"
    wait until the name of button "Hello Button" is "Hello"
    go to step "Hello Button Script"
end step

step "Hello Button Script"
	The mouseUp message is sent to a button when the user clicks on it. We are going to make a dialog
	box pop up when the user clicks on the 'Hello' button, by using LiveCode's 'answer' command in response 
	to the mouseUp message.
action
	go to step "Set Hello Button Script"	
end step

step "Set Hello Button Script"
    Right click on the button and select 'Edit Script' from the menu to open the script 
    editor.
action
    highlight button "Hello Button"
    wait until there is a script editor for button "Hello Button"
    go to step "Set Hello Button Script 2"
end step

step "Set Hello Button Script 2"
    Set the script of the button to the following, and click the Apply button (in the top left corner of the script editor):
script
    on mouseUp
    	answer "Hello World"
    end mouseUp
action
    wait until button "Hello Button" is scripted
    go to step "Set Tool To Run"
end step

step "Set Tool To Run"
    Now test the code you have written. First, switch to run mode by clicking on the run 
    mode tool in the Tools palette.
action 
    highlight tool "Run Mode"
	  wait until the tool is run
		go to step "Click Hello Button"
end step

step "Click Hello Button"
    Click on the "Hello" button to see the result.
action
    highlight button "Hello Button"
    wait until button "Hello Button" pops up answer dialog
end step

epilogue
    Congratulations, you have just made your first app!
end epilogue

I was un-branding those tutorials today in fact.

Screen Shot 2021-11-04 at 8.49.30 PM.png (2.06 MiB) Viewed 3323 times

[richmond62]

Hmm: I think that the HC wallpaper makes one's eyes go funny.

[OpenXTalkPaul]

Hmm: I think that the HC wallpaper makes one's eyes go funny.

I was just trying out the revHyperCardIcons lib, just have to set the stack background to default or a color to change it across all cards. That's the nice thing about inheritance in "Object Oriented", I just have to change the Stack properties to change all cards.
OK just changed the logo which in a background behavior group that's on every card in the stack.

Screen Shot 2021-11-05 at 10.23.17 AM.png (192.96 KiB) Viewed 3312 times

[richmond62]

While I'm being nasty . . .

You spelt "fields" incorrectly.

That pinky-purple turns my stomach.

But significantly better without the tiled HC icons.

[OpenXTalkPaul]

While I'm being nasty . . .

You spelt "fields" incorrectly.

Oh sheesh, yes I'm terrible with spelling, always use 'fld' instead of field when scripting, maybe I should be working on adding IDE-wide spell checking before anything else! Just had to push a bunch of changes to the repo because I used otx instead of oxt in a bunch of spots, spell check wouldn't have helped there! Glad youze guyz are here keep me straight!


[/quote]

That pinky-purple turns my stomach.

But significantly better without the tiled HC icons.
While I'm being nasty . . .

You spelt "fields" incorrectly.

That pinky-purple turns my stomach.

But significantly better without the tiled HC icons.

Yeah it's a bit distracting still, probably wind up with neutral grays with maybe a few hints of color.

EDIT, playing around with the look of the stack a little bit, I don't want to spend too much time on this sort of thing until later:

Screen Shot 2021-11-05 at 7.07.39 PM.png (2.13 MiB) Viewed 3297 times

[richmond62]

It certainly looks inspiring!

[OpenXTalkPaul]

2) The menu bar extends off the right edge of the screen, but can still file > exit. Maybe shorten.

OK, I started to make some additions to the IDE Preferences, there's actually a few things i want to make into user settable preferences. I'm also working on a Dark Mode setting for all platforms but particularly on macOS it needs my macOS Tools Builder extension to work fully (window frames)

Screen Shot 2021-11-07 at 4.26.22 PM.png (565.44 KiB) Viewed 3296 times

I'm also adding a palette for Alignment / Distribute objects, seperate from the Property Inspector, with SVG vector icons.
While working on that I find a need to incorporate a new widget like SVG Icon widget but one that it can be used as buttons (sends mouseUp, mouseDown, mouseLeave/etc. events to the engine), There may be something similar to this around already.

Screen Shot 2021-11-07 at 4.43.33 PM.png (46.43 KiB) Viewed 3296 times

[xAction]

Second version is way too 90's website, those beveled buttons scream Photoshop 5.5 WOW book. (before the bevels were built in to Photoshop)

One of the complaints about the Lazarus IDE, which applies to our IDE is that it has a multiple floating window interface.
Godot,
Unity,
Unreal Engine,
Scratch,
Invision Studio,
$5000 a month Crank storyboard
Every Adobe product.
Every Apple product that I remember from over a decade ago.
Blender
Maya
Any online/browser based application such as playcode, goxel, figma, moqups, figuro, Tinkercad , Mixamo and of course all the Google Apps...


All use the single window interface paradigm. I guess this is what LC was trying to do with the backdrop, but controls don't snap to any predefined locations, the backdrop is not an active scrollable workspace, inspector windows pop up all over the place, while testing an application you are always completely immersed in the development environment until you build a standalone and experience the application in its own context....which of course has its benefit but maybe a toggle somewhere for hiding the environment on 'run' mode might be something to include, or just a 'Hide IDE and Test" menu to use on ocassion.

[OpenXTalkPaul]

I've been using PhotoShop/Illustrator/Adobe products for three decades (it's what I actually do for a living, coding more of a hobby) and the very first thing I do on a new install of Adobe Apps is turn OFF that application frame thing, adjusting my palettes and settings to make it exactly like it was before 10+ years ago when they started mucking around with that. I have tried and true production workflow reasons for that. Of course everyone is different, I know people who use a different full screen workspace for each app they have open, that's not for me, I like to drag and drop things from the file manager or from one app directly into another, and I can't do that if the foreground app is taking up the whole screen obscuring the background.

This is Adobe Illustrator's Align Palette (tabbed with a couple of others):

Screen Shot 2021-11-08 at 1.37.20 AM.png (11.24 KiB) Viewed 3287 times

However, I'm not against making palettes that can snap and merge into other palettes like Adobe apps do, but if you want that, the LC Property Inspector already a tabbed multi-purpose palette. I was thinking of putting Align/Spacing (and also text/type tools too) into the horizontal Toolbar (top pict) bellow the menu bar as well, or perhaps instead of having a seperate palette. I'm just starting to modify that Toolbar thing a bit, maybe better to replace the whole thing, not sure. But that would be very Adobe-esque to have things like that in that toolbar (as opposed to links to lessons, demos stacks, etc. that are in there currently). I also would like to add temporary guides lines/rules, there's been two different plugins released by community members for that fairly recently, but what I'd REALLY like something EVEN MORE Page-Layout app like, customizable guide lines that are saved with a stack's ( a guides cProp) which if present can be made visible / invisible via new View menu options, complete with a snap-to-guides choice, exactly like Adobe Indesign / Illustrator and the like!

The palette in that Align/Distrubute is a preview showing the vector icons that I created in Illustrator placed in SVGIcon widgets. I actually modeled them closely on Adobe's Align Palette's Icons! The reason there is a beveled edge fram is because I quickly added a transparent LC button over top of the SVG Widget Icon because SVG Icon widget can NOT be used as a button by itself! That widget does NOT send mouseUp/Down/Leave/etc. which i frustrating and I aim to fix that ASAP, because I hate having to have buttons or graphic objects on top of the widget just to make it act like a button or an image object would.

[OpenXTalkPaul]

The reason I'm taking some time to make vector SVG icons for the IDE is that the colors can easily be modified instantly for the entire palette all at once simply by setting the stack's foreGroundColor and backGroundColor, which will make toggling IDE-wide darkMode / lightMode super easy! Vector art means they should scale to any size and not pixelate!

Screen Shot 2021-11-08 at 2.21.30 AM.png (24.3 KiB) Viewed 3285 times

Screen Shot 2021-11-08 at 2.21.16 AM.png (24.55 KiB) Viewed 3285 times

[richmond62]

I do like your dark palette: wonderful.

[xAction]

You can still drag and drop from the file system to a single window UI, I do it all the time with Blender, paint.net, Audacity, Notepad++, Inkscape,etc etc.

A unified application window doesn't have to be nailed to the four corners of the screen at all times, it can still be resized, dragged down the screen, but you can instantly tell what palettes belong to what window. 7 single window applications running in perfect harmony.

7SingleWindowApps.png (141.82 KiB) Viewed 3270 times

Right now I open up two copies of LC and I've got two floating menu bars, two floating toolbars, floating stack windows, floating inspectors who do they belong to is anyone's guess. Of course coming from a Mac the obvious question arises "Why the hell would you have two of the same app open at the same time?"
Windows is a strange and terrible place where anything can happen.

[richmond62]

Well, if it is any comfort at all (fairly cold comfort)
one can end up with multiple instances of LiveCode on
Xubuntu . . . especially with impatient children who
cannot wait for 30 seconds for something to load.

[barko]

Well, if it is any comfort at all (fairly cold comfort)
one can end up with multiple instances of LiveCode on
Xubuntu . . . especially with impatient children who
cannot wait for 30 seconds for something to load.

I have this in my openxtalk.desktop file, no multiple instances ever:

Code: Select all

[Desktop Entry]
Version=1.0
Encoding=UTF-8
Type=Application
Name=OpenXTalk
Icon=/home/barko/bin/OpenXTalk-IDE/OXTArtwork/OpenXTalkStackIcon.png
Exec=env GTK_DATA_PREFIX="" flock -xn .openxtalk.lck "/home/barko/bin/OpenXTalk-IDE/IDE Bundle/Contents/Tools/OpenXTalk.x86_64" %U

[xAction]

When it comes to signifcant numbers of controls aligning by script is what works best.

When you have all text of labels (for instance) right aligned, and on the left of the stack, they all need to be aligned to the right of one of the labels and nudging up against the left of one of the objects they are labeling. Sometimes the rect of the label has to bleed off the left of the stack to fit the text while maintaining the right aligned label look.
In this example all the label fields are the same size, the labels on top are bleeding off the left of the stack by as many pixels as the width of the red line.

AlignExample.png (9.58 KiB) Viewed 3247 times

Maybe a new object class based on the line graphic called Guides with a radio toggle between properties xGuide and yGuide (or checkboxes for both? two for one special on guides) would be useful.
The guide object could be called by ID or auto named by its set location in x or y it could also have ,color, dash ,thickness properties. Then:

AlignExample2.png (8.91 KiB) Viewed 3247 times

The difference between guides and line graphic being they can all be locked/unlocked and/or shown/hidden with a single menu choice, and when switching to browse tool, individually temporarily manipulated out of their locked state with an alt-click-drag, set quickly with a single number value, visible during development and automatically hidden when the runtime is built. A "Snap to Guides" toggle might work on a similar background script as the grid is using, only snapping to the guides when in some proximity without making every drag of an object feel lumpy.

Some people have requested guides, and I'm 100% certain I had some stacks/plugins/extension that added them to the IDE in the past, although I personally didn't find use for them. In the page layout industry they are necessary to keep your text out of a gutter or for defining die cuts and bleeds or for maintaining border ratios on multiple sized ads

Maybe when electronic paper finally arrives in the 22nd century we'll be ahead of the curve with our page layoutishsness.

[OpenXTalkPaul]

I have this in my openxtalk.desktop file, no multiple instances ever:

Code: Select all

[Desktop Entry]
Version=1.0
Encoding=UTF-8
Type=Application
Name=OpenXTalk
Icon=/home/barko/bin/OpenXTalk-IDE/OXTArtwork/OpenXTalkStackIcon.png
Exec=env GTK_DATA_PREFIX="" flock -xn .openxtalk.lck "/home/barko/bin/OpenXTalk-IDE/IDE Bundle/Contents/Tools/OpenXTalk.x86_64" %U

Thanks again @barko!
I was just looking into doing this as well, it was driving me crazy while using Ubuntu Studio last week! I'm used to launching apps by double clicking a file in a file manager. Is this just good for GTK Desktop, or will it work for QT/KDE desktop too? Asking because I'm currently using KDE Plazma.