diff options
| -rw-r--r-- | Text TV Pixelflut BornHack 2024/Anti aliased text.png | bin | 0 -> 2489 bytes | |||
| -rw-r--r-- | Text TV Pixelflut BornHack 2024/Anti aliasing turned off.png | bin | 0 -> 1781 bytes | |||
| -rw-r--r-- | Text TV Pixelflut BornHack 2024/Mock up.png | bin | 0 -> 12158 bytes | |||
| -rw-r--r-- | Text TV Pixelflut BornHack 2024/Thumbnail.png | bin | 0 -> 107871 bytes | |||
| -rw-r--r-- | Text TV Pixelflut BornHack 2024/index.md | 126 |
5 files changed, 126 insertions, 0 deletions
diff --git a/Text TV Pixelflut BornHack 2024/Anti aliased text.png b/Text TV Pixelflut BornHack 2024/Anti aliased text.png new file mode 100644 index 0000000..739c551 --- /dev/null +++ b/Text TV Pixelflut BornHack 2024/Anti aliased text.png Binary files differdiff --git a/Text TV Pixelflut BornHack 2024/Anti aliasing turned off.png b/Text TV Pixelflut BornHack 2024/Anti aliasing turned off.png new file mode 100644 index 0000000..628d80c --- /dev/null +++ b/Text TV Pixelflut BornHack 2024/Anti aliasing turned off.png Binary files differdiff --git a/Text TV Pixelflut BornHack 2024/Mock up.png b/Text TV Pixelflut BornHack 2024/Mock up.png new file mode 100644 index 0000000..e633493 --- /dev/null +++ b/Text TV Pixelflut BornHack 2024/Mock up.png Binary files differdiff --git a/Text TV Pixelflut BornHack 2024/Thumbnail.png b/Text TV Pixelflut BornHack 2024/Thumbnail.png new file mode 100644 index 0000000..1bd926a --- /dev/null +++ b/Text TV Pixelflut BornHack 2024/Thumbnail.png Binary files differdiff --git a/Text TV Pixelflut BornHack 2024/index.md b/Text TV Pixelflut BornHack 2024/index.md new file mode 100644 index 0000000..1c7eed1 --- /dev/null +++ b/Text TV Pixelflut BornHack 2024/index.md @@ -0,0 +1,126 @@ +--- +description: Pixelflut emulating teletext aka *Tekst-TV* featuring schedule, and user content *news* section +created: 2024-07-07 +--- + +## Idea + +This years BornHack will feature an even cooler Pixelflut setup, which inspired me to make something for it. +An important goal was to have something with a low barrier of entry to interact with it. +My first idea involved a keyboard presented at the Pixelflut setup, +allowing one to type messages to be displayed on screen. +Then later i got the idea to make it Text TV themed, this works well with the nerdy culture, and allows me to add a +schedule, and get user interaction through a "news" section. + +### Mock up + + + +### Inspiration + + + + +--- + +## Renderer coding + +### Text rendering in C using pango & cairo + +Based on a cairo pixel flut code sample from a fellow hacker, which i could expand to import and image, rather easily, +and render text, which worked, but it was anti aliased, making it look horible in the small format. + + + +Top is gimp mock up text, +bottom is pango cairo rendered text + +### Turning off anti aliasing + +This was annoying, because `cairo_set_antialias(cr, CAIRO_ANTIALIAS_NONE);` didn't work, +it had to be done in pango context. + +[Change font rendering (non-antialiased) with pango - stackoverflow.com](https://stackoverflow.com/questions/16106659/change-font-rendering-non-antialiased-with-pango#answer-73221211) + +An answer in this stack overflow question, mentions that: +*"In C you can turn off anti-aliasing when drawing with Pangocairo like this:"* +```c +cairo_font_options_t *options = cairo_font_options_create(); +cairo_font_options_set_antialias(options, CAIRO_ANTIALIAS_NONE); +pango_cairo_context_set_font_options(context, options); +cairo_font_options_destroy(options); +``` + +Next problem then, is getting the context. + +I found out how to do this in: [pango examples cairoshape.c - gitlab.com](https://gitlab.gnome.org/GNOME/pango/-/blob/239e030e4f38f0b7b899a8a405437601daf2860d/examples/cairoshape.c#L137) + +Using `layout = pango_cairo_create_layout (cr);` and `pango_layout_get_context (layout);` + +This means i can now turn off, anti aliasing + +Here's a code sample: + +```c + cairo_surface_t *surface; + cairo_t *cr; + + surface = cairo_image_surface_create_for_data( + f->image, f->format, + f->width, f->height, f->stride); + cr = cairo_create(surface); + + //cairo_scale (cr, 2, 2); + //cairo_set_antialias(cr, CAIRO_ANTIALIAS_NONE); + + int w, h; + cairo_surface_t *image; + + image = cairo_image_surface_create_from_png ("../base.png"); + w = cairo_image_surface_get_width (image); + h = cairo_image_surface_get_height (image); + //cairo_translate (cr, 0, 1080 - h); + + cairo_set_source_surface (cr, image, 0, 0); + cairo_paint (cr); + + // Set up the Pango Cairo context + PangoLayout *layout = pango_cairo_create_layout(cr); + PangoFontDescription *font_desc = pango_font_description_from_string("Monospace 7"); + //pango_font_description_set_size(font_desc, 8 * PANGO_SCALE); + pango_layout_set_font_description(layout, font_desc); + pango_font_description_free(font_desc); + + // Turn off antialias + PangoContext *pango_context = pango_layout_get_context (layout); + cairo_set_antialias(cr, CAIRO_ANTIALIAS_NONE); + cairo_font_options_t *options = cairo_font_options_create(); + cairo_font_options_set_antialias(options, CAIRO_ANTIALIAS_NONE); + pango_cairo_context_set_font_options(pango_context, options); + cairo_font_options_destroy(options); + + // Move + cairo_translate (cr, 6, 115); + + // Set the text to display + pango_layout_set_text(layout, "Hello World!", -1); + + // Render the layout + cairo_set_source_rgb(cr, 1, 1, 1); // Set color to white + pango_cairo_show_layout(cr, layout); + + // Clean up + g_object_unref(layout); + + + cairo_destroy (cr); + cairo_surface_destroy(surface); +``` + +Which renderes non-anti-aliased text + + + +Again, top is gimp mock up text, +bottom is pango cairo rendered text + |
