Pyramid

Pyramid is an User-Interface (UI) editor.

Pyramid is a WYSIWYG application (What You See Is What You Get) in other terms it allows you to visually design the expected outcome.

Pyramid helps you to produce final UI in Bloc and Toplo libraries.

The designed UI persistence is based on the "-Serialization" projects below. Pyramid saves a designed UI into a method as a string. Refer to the "-Serialization" projects to learn more.

You can add plugins into Pyramid to extend the editor capacities or create your own plugin with your specific functions!

How to get Pyramid

You can load a release version of Pyramid or the latest development version. Beware that Pyramid is currently in alpha development. The API is subject to significant changes, and stability is not guaranteed. Projects created during the alpha version are not designed to be compatible with newer versions of Pyramid.

Pyramid is available with Bloc and Toplo as defaults. If you want to build UI without Toplo, you can choose to load Pyramid with only Bloc using the baseline option load: 'BlocUI'. Here's an example script below.

To install a version of Pyramid, use one of the following scripts inside a playground.

Latest development version

Metacello new
    baseline: 'Pyramid';
    repository: 'github://OpenSmock/Pyramid:main/src';
    load

Only with Bloc (without Toplo features):

Metacello new
    baseline: 'Pyramid';
    repository: 'github://OpenSmock/Pyramid:main/src';
  load: 'BlocUI';
    load

Release version

We advise you to use dependencies committed at the date of the Pyramid release (Bloc, Bloc-Serialization, etc.) to ensure compatibility with a release of Pyramid.

Metacello new
    baseline: 'Pyramid';
    repository: 'github://OpenSmock/Pyramid:alpha4';
    load

Add in your baseline

spec baseline: 'Pyramid' with: [ spec repository: 'github://OpenSmock/Pyramid:main/src' ].

How to use Pyramid

Create a new project

Open the Pyramid menu from the Library tab and click New Project.

Then the project view appears in a new window.

Add and setup graphical elements

Use the create button to add graphical elements in your project view.

https://github.com/OpenSmock/Pyramid/assets/49183340/a02db9ad-314a-4caf-884c-9da4da809293

Test behavior in the editor

Use the test/edit button to switch between the edit mode and the test mode.

https://github.com/OpenSmock/Pyramid/assets/49183340/a85d8c01-89dd-472c-ab4e-41d51a8629dd

Save a project

Setup the project to store your view into a Class.

When your project is saved into a method, you can see the preview on the Pyramid preview tab.

https://github.com/OpenSmock/Pyramid/assets/49183340/eb70004b-cfb4-43a0-8759-27d3bac75fd0

Edit a saved project

Use the Pyramid preview tab to edit an existing project.

https://github.com/OpenSmock/Pyramid/assets/49183340/c4a18e51-5fb5-412c-90d4-0638cadb6bff

Test a project

Use the Pyramid preview tab to test an existing project.

https://github.com/OpenSmock/Pyramid/assets/49183340/12a916e5-06d1-426f-954c-2e4e911475e1

Tips

To edit a BlElement instance or a BlSpace instance into Pyramid :

element editWithPyramid.
space editWithPyramid.

You can edit in Pyramid all opened BlSpace with the F12 keyboard shortcut, this feature can be disabled in the settings.

When a window is open in Pyramid, an image is displayed on it to attract the user's attention:

https://github.com/OpenSmock/Pyramid/assets/49183340/0c66a3ac-7bea-48c1-b1e8-0b093b1db4d5

Plugins

FigmaToWorld plugin provides capacities to import projects designed with Figma

Dependencies

License

This project is licensed under the MIT License - see the LICENSE file for details.

OpenSmock / Pyramid

readme