Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/pharo-graphics/Bloc
Low-level UI infrastructure & framework for Pharo
https://github.com/pharo-graphics/Bloc
2d animations bloc effects graphics pharo smalltalk ui
Last synced: about 2 months ago
JSON representation
Low-level UI infrastructure & framework for Pharo
- Host: GitHub
- URL: https://github.com/pharo-graphics/Bloc
- Owner: pharo-graphics
- License: mit
- Created: 2016-11-03T10:39:54.000Z (over 7 years ago)
- Default Branch: dev
- Last Pushed: 2024-05-10T22:04:04.000Z (about 2 months ago)
- Last Synced: 2024-05-14T00:00:41.477Z (about 2 months ago)
- Topics: 2d, animations, bloc, effects, graphics, pharo, smalltalk, ui
- Language: Smalltalk
- Homepage:
- Size: 17.4 MB
- Stars: 78
- Watchers: 12
- Forks: 37
- Open Issues: 136
-
Metadata Files:
- Readme: README.md
- Changelog: HISTORY.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Lists
- awesome-pharo - Bloc - Next generation low-level UI infratructure and framework for Pharo. (Graphics)
README
# Bloc
[](./LICENSE)
[](https://github.com/pharo-graphics/Bloc/actions/workflows/test.yml)
Bloc is a low-level UI infrastructure & framework for [Pharo](http://pharo.org/).
:warning:
This repository contains the code for Bloc that will included in the future in Pharo.
It retrofits a part of the development made at https://github.com/feenkcom/bloc. This version will focus on core features and stability. We are currently identifying the core we want for Pharo.
You can join the mailing-list [email protected] from http://sympa.inria.fr.
## Installation
Use the following script to install stable Bloc in stable [Pharo](https://pharo.org/download):
```smalltalk
[ Metacello new
baseline: 'Bloc';
repository: 'github://pharo-graphics/Bloc:master/src';
onConflictUseIncoming;
ignoreImage;
load ]
on: MCMergeOrLoadWarning
do: [ :warning | warning load ]
```
You can replace `master` by:
* `dev` to work on the development branch
* `v2.0.0-alpha` to load a released version
## Getting Started
Open a new window (a Bloc _space_)
```smalltalk
aSpace := BlSpace new.
aSpace show.
"Edit the space's properties, like title and size"
aSpace title: 'Bloc basics'.
aSpace extent: 800 @ 600.
```
Draw an element (a `BlElement`)
```smalltalk
"Create a red rectangle"
rectangle := BlElement new
background: Color red;
size: 150 @ 150;
yourself.
"Add it to the space"
aSpace root addChild: rectangle.
"Update its properties"
rectangle
background: Color lightBlue;
position: 100 @ 100;
border: (BlBorder paint: Color blue width: 10).
```
Nesting elements
```smalltalk
"Create a circle using a geometry (a BlElementGeometry subclass)"
circle := BlElement new
background: Color blue;
geometry: BlCircleGeometry new;
size: 80 @ 80;
yourself.
rectangle addChild: circle.
"Use a transformation to resize and show child element's overflow"
circle transformDo: [ :builder | builder scaleBy: 1.2 ].
rectangle clipChildren: false
```
Animating
```smalltalk
"Animate opacity"
rectangle addAnimation: (BlOpacityAnimation new opacity: 0.5).
"Animate transformations"
fallAnimation := (BlTransformAnimation translate: 0 @ 200) absolute.
rectangle addAnimation: fallAnimation.
climbAnimation := (BlTransformAnimation translate: 0 @ 0) absolute.
rectangle addAnimation: climbAnimation.
"Create sequence of animations"
animationSequence := (BlSequentialAnimation withAll: {fallAnimation . climbAnimation})
beInfinite;
yourself.
rectangle addAnimation: animationSequence
```
Handling Events
```smalltalk
"Change color on click"
rectangle addEventHandlerOn: BlClickEvent do: [ :event | event target background: Color lightGray ].
"Animate on hover/blur"
rectangle
addEventHandlerOn: BlMouseEnterEvent
do: [ :event | event target addAnimation: (BlOpacityAnimation new opacity: 0.2)];
addEventHandlerOn: BlMouseLeaveEvent
do: [ :event | event target addAnimation: (BlOpacityAnimation new opacity: 0.8)]
```
## License and Contributing
This code is licensed under the [MIT license](./LICENSE).
If you want to contribute to the project, please read our [contributing guide](./CONTRIBUTING.md).