tidbyt / pixlet Goto Github PK

Hi all,
working on my own app, and ran into a puzzling situation. I wanted to create a separate function to handle rendering (so that I can call it with different parameters). However, whenever I try to call render.<anything>() from within a non-main function, it just doesn't render.

Consider the following sample:

load("render.star", "render")


def main():
    return render.Root(
        child = render.Column(
            children=[
                render.Text("This works"),
                printRedText("This doesn't"), #won't render
                printRedText2(render, "Neither does this") #won't render
            ]
        )
    )

def printRedText(text):
    render.Text(content=text, color="#f00")

def printRedText2(r, text):
    r.Text(content=text, color="#f00")

Neither version of the function printRedText print anything, we end up with just the first line rendered:

Am I missing something or does render have to be called from within main?

Thanks!

Output of brew install:

brew install tidbyt/tidbyt/pixlet
==> Tapping tidbyt/tidbyt
Cloning into '/opt/homebrew/Library/Taps/tidbyt/homebrew-tidbyt'...
remote: Enumerating objects: 67, done.
remote: Counting objects: 100% (67/67), done.
remote: Compressing objects: 100% (66/66), done.
remote: Total 67 (delta 41), reused 0 (delta 0), pack-reused 0
Receiving objects: 100% (67/67), 9.54 KiB | 9.54 MiB/s, done.
Resolving deltas: 100% (41/41), done.
Error: Invalid formula: /opt/homebrew/Library/Taps/tidbyt/homebrew-tidbyt/pixlet.rb
formulae require at least a URL
Error: Cannot tap tidbyt/tidbyt: invalid syntax in tap!

Other info that might be helpful:

brew doctor
Your system is ready to brew.

brew config
HOMEBREW_VERSION: 3.3.9-36-ge970bb1
ORIGIN: https://github.com/Homebrew/brew
HEAD: e970bb18765cd4f16c39585cb0eabc9208c68996
Last commit: 26 hours ago
Core tap ORIGIN: https://github.com/Homebrew/homebrew-core
Core tap HEAD: f2b69fcaf6cf9925caac56dad26d39d30e89b42c
Core tap last commit: 3 hours ago
Core tap branch: master
HOMEBREW_PREFIX: /opt/homebrew
HOMEBREW_CASK_OPTS: []
HOMEBREW_CORE_GIT_REMOTE: https://github.com/Homebrew/homebrew-core
HOMEBREW_EDITOR: code
HOMEBREW_MAKE_JOBS: 10
Homebrew Ruby: 2.6.8 => /System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/bin/ruby
CPU: 10-core 64-bit arm_firestorm_icestorm
Clang: 13.0.0 build 1300
Git: 2.34.1 => /opt/homebrew/bin/git
Curl: 7.77.0 => /usr/bin/curl
macOS: 12.0.1-arm64
CLT: 13.1.0.0.1.1633545042
Xcode: 13.1
Rosetta 2: false

Would be really nice to have images in the font documentation that show what each font looks like.

I'm interested in potentially creating a pixlet app that visualizes some data published in CSV format from a public source. However I noticed that encoding/csv from Starlib is not in the list of supported Starlib packages. Is there any chance that support for this can be added?

When using the --watch option, after a file save, I get the below error:

pixlet serve --watch ./helloworld.star 
2021/12/19 13:06:48 loaded ./helloworld.star
2021/12/19 13:06:48 listening at http://127.0.0.1:8080
2021/12/19 13:06:48 error establishing a new connection websocket: request origin not allowed by Upgrader.CheckOrigin
2021/12/19 13:06:53 detected updates for ./helloworld.star, reloading
panic: runtime error: invalid memory address or nil pointer dereference
[signal SIGSEGV: segmentation violation code=0x1 addr=0x78 pc=0x9531a6]

goroutine 52 [running]:
github.com/gorilla/websocket.(*Conn).beginMessage(0x0, 0xc000182330, 0x1, 0xc000149f10, 0x411d70)
	/root/go/pkg/mod/github.com/gorilla/[email protected]/conn.go:472 +0x26
github.com/gorilla/websocket.(*Conn).NextWriter(0x0, 0x1, 0x7f2a842540a0, 0x8, 0x10, 0x7f2aae7c77d0)
	/root/go/pkg/mod/github.com/gorilla/[email protected]/conn.go:513 +0x53
github.com/gorilla/websocket.(*Conn).WriteJSON(0x0, 0xa42b80, 0xc00061e1b0, 0x0, 0x0)
	/root/go/pkg/mod/github.com/gorilla/[email protected]/json.go:24 +0x49
tidbyt.dev/pixlet/server.(*Server).fileWatcher(0xc0000ab400, 0x0)
	/buildkite/builds/buildkite-agent-1-1/tidbyt/release-pixlet/server/server.go:210 +0x28a
created by tidbyt.dev/pixlet/server.(*Server).serveWebsocket
	/buildkite/builds/buildkite-agent-1-1/tidbyt/release-pixlet/server/server.go:82 +0x15a

Details

• pixlet binary v0.7.0
• Ubuntu 21.10 x86_64
• GNOME 40.5 via gnome-terminal

To replicate:

1. Make a file called helloworld.star with the below contents:

load("render.star", "render")
def main():
    return render.Root(
        child = render.Text("Hello, World!!")
    )

2. download pixlet binary and run the below command:

pixlet serve --watch ./helloworld.star

3. save a file and see the error noted above.

Side note:

This product and the launch and the dev options are AMAZING, huge kudos to the team, I am loving this device.

The README correctly statues that time operations have been upstreamed into starlark-go, but unless I am mistaken, this is not reflected in the actual build.

For example, calling the parseTime (or parse_time) method from a Pixlet app results in the following error:

Error: module has no .parseTime field or method

However, calling the older time method appears to work.

Am I doing something wrong? Is think likely to change in a future release?

As far as I can tell, the current regex module doesn't support capture groups. The search method simply returns the starting and ending indexes of the entire match - there's no way to get the matched groups. I had to hack around this limitation in one of my recent apps: https://github.com/mackorone/tidbyt-word-of-the-day/blob/main/word_of_the_day.star#L60

Any chance capture groups can be supported?

Will be useful for people outside English speaking countries.

The main README has this in it:

Push as an Installation

Pushing an applet to your Tidbyt without an installation ID simply displays your applet one time. If you would like your applet to continously display as part of the rotation, add an installation ID to the push command:

pixlet render examples/bitcoin.star
pixlet push --api-token <YOUR API TOKEN> <YOUR DEVICE ID> examples/bitcoin.webp <INSTALLATION ID>

This appears to be missing, as there's no mention of installation ID in push.go, nor does it look for another command line parameter (as far as I can tell).

All fonts are currently provided at build time, so there's no way for an applet to provide their own custom font. We should change that. Case in point: big_clock.star by @joeyhoer which had to embed PNGs for each digit to render a large clock.

While this isn't mandatory by any means, it'd be super helpful to release all of the official Tydbit apps available through the app (stocks, Spotify now playing, transit, etc). This would help give developers a better understanding to create more complex apps with non traditional display aspects, things like stock charts and complex layouts. While the layout documentation is good enough, more examples would be greatly appreciated.

Allow render.Plot() to return a scatter plot (i.e. don't connect the points). I don't think a whole new function is per se necessary for this though.

Regarding the max_age option (see #143):
The max_age option does only work in combination with your backend server, doesn't it? So it's not handled on the device itself?
Is there a way to mimic this behaviour when pushing an app via the pixlet push command?

And how does an app need to be rendered to skip it? Like you did with the "only on game day" option for the NFL app...?

I am currently building a timetable that shows me the local railway connections. I am able to display five connections, whereas the destination of each connection is shown in a Marquee Widget.

As I wanted to see more connections, I tried today to create an animation, that each shows five connections for half of the "display time" (eg. 7.5 seconds). However, I realized that when put into an animation, the Marquee Widget is no longer working, eg. the text in this widget is no longer scrolling.

Is that the expected behaviour?

Apologies if this is the wrong forum to ask this question in (and please redirect me if there's somewhere better):

Is there a mechanism to push directly to the Tidbyt on a local network without interacting with Tidbyt's servers?

Why: In scenarios where we might be testing or potentially have sensitive information to display, it would be nice if devs could interact with the device without it necessarily reaching back to Tidbyt. In the most aggressive scenario, I'd really love a way to completely split the hardware from Tidbyt's servers to provide complete security when it's sitting and running and instead use a local server inside the house to push content.

Problem: I've developed a clock for my Tidbyt, but have regular brief internet outages -- I live in the woods. As a result, my Tidbyt occasionally displays stale clock images that are outdated.

Feature suggestion: I'd like to be able to specify an image expiration when using the pixlet push command, like so:

(device ids and installation id excluded for simplicity)
pixlet push clock.webp -e 90

What would this expiration (-e) do? I propose that if the clock.webp image isn't replaced on the Tidbyt device within 90 seconds, that the Tidbyt should advance to the next app, or if there are no apps to advance to then display a blank screen, or other default image.

My thinking here is that no clock is better than an incorrect clock. This functionality would ensure developers could expire images after a set number of seconds.

Incidentally, this could also serve as an early warning indicator of an internet outage on your network.

I'm not sure if the change belongs in render.Marquee or render.Text. As I think either could be worked on. I know #196 was closed because it was getting heavy, but was wondering if an option for alignment could be added (not sure if that should only apply if it scrolls or it always applies and then you would use offset start and end to adjust accordingly when it does scroll?)

I think the change would come in lines 134 and 137 below and use DrawImageAnchored with ax either being 0,0.5, or 1? and ay would still always be zero otherwise I would think you would want the alignment to be set to start, center or end instead of left, center or right.

I wanted to get some thoughts before I went and made this change though. And I know you could center it with render.Box, but then to do that you would have to set the width to 64 and then it would also then never scroll since the box fits in the marquee space, which is why an alternative fix would be necessary.

cc: @betterengineering

If a user edits a Text setting, but then goes back and removes it (deletes the string), the item stays in config as a blank zero length string.

This is a bit disruptive for dev because you have to check for existence AND if it's zero length, rather than just checking if it's set.

It would be nice if when a Text item is edited to zero length, it was removed from config.

Obviously the scheduling of applets is solid gold on Tidbyt, but being able to schedule an expiration of an applet would be amazing.

I love being able to schedule my applets to create the experience that I want. But sometimes I add messages/info with applets that are ephemeral. Example:

• What's for dinner
• What activity is today
• Daily message for a specific day

And rather than having to go back to remove these applets, to prevent stale info from being on our Tidbyt, it would be even better if I could set an expiration date/time.

That way, the applet could show until I want it, and will fall off the list without having to manually mange it.

Not sure if this is the right place for this; it would be sweet if there was an option to disable app cycling (or set app cycling to "manual").

Use case: I created a clock app which renders a webp with 1440 frames (one for each minute of the day). If I push this to the Tidbyt, it should be able to run indefinitely and keep time semi-accurately (assuming the webp frame delay timing is correct). However, what I've noticed is that even when this is the only app which is installed on the Tidbyt, the Tidbyt still resets it to the first frame after some number of seconds. I believe this is due to the app "cycling" which resets the webp to the first frame—this effectively prevents an all day clock from being created via a single push. (The alternative is to push a new image every minute.)

Suggested behavior: I believe an ideal situation would be to allow users to specify a preferred number of seconds to display an app before cycling. Then, an additional checkbox would exist which would say something like "Allow apps to set their own cycle timing"; setting this checkbox to true, would allow each app to control the amount of time they are displayed before cycling; if no cycle timing is defined by the app, it would fallback to the user's preference.

Additionally, when only one app is installed, it should not cycle, as doing so resets the animation.

From @mackorone:

When a Marquee widget is first displayed, none of the text is visible. I’ve love an option to have the text start left-aligned. I’d also love an option to stop the scrolling once the end of the text is visible.

The Marquee widget limits its child to double its width (when scrolling horizontally) or double its height (when scrolling vertically). Can this be relaxed to maybe 5 or 10 times the dimension?

I installed Pixlet via Homebrew on a M1 MacBook Pro, but am getting the following errors with the Web library when running the "Hello World" curl command:

Library not loaded: /usr/local/opt/webp/lib/libwebpdemux.2.dylib
  Referenced from: /opt/homebrew/bin/pixlet
  Reason: no suitable image found.  Did find:
	/usr/local/opt/webp/lib/libwebpdemux.2.dylib: mach-o, but wrong architecture
	/usr/local/opt/webp/lib/libwebpdemux.2.dylib: stat() failed with errno=1
	/usr/local/opt/webp/lib/libwebpdemux.2.dylib: mach-o, but wrong architecture

pixlet render allows zero or more key/value pairs to be passed on the command line which end up in the configuration dictionary that's passed to the script. pixlet serve does not seem to support this yet even though there is some internal plumbing present already in the form of a config change channel.

Would it make sense to extend the serve command with the same config support as render? Or did you have something else planned here? I'm considering writing up a pull request for this so I would like to know in which direction you were going to take this.

For usernames and or other non-dictionary strings it would be helpful to control whether the system auto-corrects.

So far I've had auto-correct mess me up with my Twitter Follows app and the Steam now playing app. I know at least one other customer has commented on the behavior as well.

It would be useful for apps to be able to read some global device settings like the app cycle speed and then adjust to them.

For example, for my "Weather Map" app (tidbyt/community#189), I would like to adjust the animation delay based on the app cycle speed, so that the full weather radar animation can finish in all cases and is not cut off if the app is shown for a shorter time.

I am testing out writing an application and just following the tutorial which involves having text as a simple clock. After having pushed the binary to the device, I would expect the clock would update with realworld time.. but it does not. The time stays constant and never changes.

Sample code:

load("render.star", "render")
load("time.star", "time")

def main(config):
    timezone = config.get("timezone") or "America/Los_Angeles"
    print("Timezone: :"+str(timezone))
    now = time.now().in_location(timezone)

    return render.Root(
        delay = 500,
        child = render.Box(
            child = render.Animation(
                children = [
                    render.Text(
                        content = now.format("3:04 PM"),
                        font = "6x13",
                    ),
                    render.Text(
                        content = now.format("3 04 PM"),
                        font = "6x13",
                    ),
                ],
            ),
        ),
    )

To my understanding the render delay should be redrawing the text with the time variable, which I do see the ":" being updated accordingly but the time never updates. Could you please tell me if I am missing something?

Also could you please provide the source code to the applications on the device just for reference? And if there any limitations between applications already present on the device vs applications pushed remotely?

Please let me know if you need more information.

Thanks.

There seems to be no way to handle HTTP exceptions, notably those that come from SSL failures. I understand the restrictions placed on Starlark as a config language which includes no exception handling, but the pixlet use-case is a little different and it would be nice to be able to handle such errors more gracefully in the app code. Maybe a special pixlet version of the starlib http library which catches and returns such errors in the response from the call rather that the equivalent of a starlark fail.

The latest change to the docs in Build.MD don't seem to work for me.

Using relative paths and an out directory seems to work though.

go build -o ./out  ./render ./runtime ./encode .

I copied the clock demo code exactly (below):

load("render.star", "render")
load("time.star", "time")

def main(config):
    timezone = config.get("timezone") or "America/New_York"
    now = time.now().in_location(timezone)

    return render.Root(
        delay = 500,
        child = render.Box(
            child = render.Animation(
                children = [
                    render.Text(
                        content = now.format("3:04 PM"),
                        font = "6x13",
                    ),
                    render.Text(
                        content = now.format("3 04 PM"),
                        font = "6x13",
                    ),
                ],
            ),
        ),
    )

When rendering/serving this as a webp on my Mac, I see the separator flashing. However, when I push this to the Tidbyt via the API, the separator does not flash. Is anyone else able to reproduce this?

It looks as if the only format the API accepts for the push command is webp. Is it possible to push a star file, and configure the refresh interval on the Tidbyt?

Example: I’m writing a clock app (as you have in the README example). When I render and push this, the Tidbyt will only display the one image (it does not update automatically when the minute changes). Do I need a server to render and push the star file once every minute to keep the display up to date? OR should I try to build the clock “app” (which is actually just a webp) such that it includes 720 frames (or 1440 frames for 24 hour time)?

It would be nice if we could mark certain fields as mandatory, so the user would not be able to add an app without filling them out.

I downloaded and unpacked the new binary for v0.8.4 and when I try to render a .star file I get the following error.

pixlet: error while loading shared libraries: libwebpdemux.so.2: cannot open shared object file: No such file or directory

I get "dummy package for goreleaser" when using pixlet:

./pixlet dummy package for goreleaser

I cannot get it to run examples, no matter what it gives me that line.

v0.17.3
ubuntu and macOS as run env

I'm referencing the Push As Installation instructions: https://github.com/tidbyt/pixlet#push-as-an-installation

Just got my Tidbyt today, and I'm trying to write some code that shows my current lifetime solar power production, etc. When I add an Installation ID to my push command, it never shows up in the app on my phone as that Install ID or anything added by API as the instructions show should happen.

Here's the commands I'm running in a .sh file that I plan to have update daily from a Raspberry Pi and then I'd like it to show up in my rotation.

pixlet render solarlife.star

pixlet push --api-token <API TOKEN> <DEVICE ID> solarlife.webp Solar

Also tried it in quotes ("Solar") to no avail.

Is this a known issue?

Thanks!

Hi! Thanks for providing a Linux binary for pixlet. I'm trying to run this on a Synology NAS, and there's a tremendous amount of yak-shaving required, mainly because this pixlet binary relies on libwebp, which is not installed by default in Synology, and the version that is supported by opkg is slightly different (1.2.1 rather than 1.2.2). Would it be possible to statically link, or provide a static version, of this binary, for folks trying to host their own pixlet apps?

I'm not sure if this is exactly the best place to put this, happy to put this anywhere needed.

It's difficult to include a screenshot for this but I noticed when I use the Marquee widget, especially in vertical mode that it scrolls so fast I can barely make out what it says. A possible feature request would be to allow fine-tuning the speed of the marquee to make it easier to read.

I'm not sure exactly how to do it or I would open a PR for this, but I can imagine the issue is the number of frames used is too low when its animated? Any help would be appreciated!

It would be nice if there was a button to download a magnified screenshot from the development web UI so you can quickly grab a render of the current output. Currently generating screenshots requires manually setting the schema variables from the .star file first which is a pain.

I served the clock example, and noticed that the time on the clock is static: it remains at the time when you run the pixlet, but it doesn't change as time goes by.

Hey! That's not a real clock! 🧐

The --watch flag isn't working on my machine (Ubuntu 16.04 LTS). Here's the command I'm running:

pixlet serve --watch nyan_cat.star

Here's the output:

Loaded tidbyt-nyan-cat/nyan_cat.star, watching for changes
listening on tcp/8080

Whenever I update the nyan_cat.star file, I have to restart pixlet and refresh the webpage to see the changes. Isn't the --watch flag supposed to eliminate need to restart pixlet?

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

• fix(deps): update github.com/bazelbuild/buildtools digest to 1429e15
• fix(deps): update github.com/google/pprof digest to 186aa03
• chore(deps): update babel monorepo to v7.24.7 (@babel/core, @babel/preset-react)
• chore(deps): update dependency go to v1.22.4
• fix(deps): update dependency @fortawesome/react-fontawesome to v0.2.2
• fix(deps): update dependency dayjs to v1.11.11
• fix(deps): update material-ui monorepo to v5.15.19 (@mui/icons-material, @mui/material)
• fix(deps): update react-router monorepo to v6.23.1 (react-router, react-router-dom)
• fix(deps): update dependency axios to v1.7.2
• fix(deps): update module github.com/fatih/color to v1.17.0
• fix(deps): update module github.com/go-playground/validator/v10 to v10.21.0
• fix(deps): update module github.com/spf13/viper to v1.19.0
• fix(deps): update module golang.org/x/image to v0.17.0
• fix(deps): update module golang.org/x/oauth2 to v0.21.0
• fix(deps): update module golang.org/x/text to v0.16.0
• chore(deps): update goreleaser/goreleaser-action action to v6
• fix(deps): update dependency @reduxjs/toolkit to v2
• fix(deps): update dependency copy-webpack-plugin to v12
• fix(deps): update dependency date-fns to v3
• fix(deps): update dependency react-redux to v9
• 🔐 Create all rate-limited PRs at once 🔐

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• chore(deps): update dependency css-loader to v7
• chore(deps): update dependency style-loader to v4
• chore(deps): update dependency webpack-dev-server to v5
• chore(deps): update github artifact actions to v4 (major) (actions/download-artifact, actions/upload-artifact)
• chore(deps): update github/codeql-action action to v3
• fix(deps): update dependency @mui/x-date-pickers to v7
• fix(deps): update dependency axios-retry to v4
• fix(deps): update dependency react-easy-crop to v5
• fix(deps): update fontsource monorepo to v5 (major) (@fontsource/barlow, @fontsource/material-icons)
• fix(deps): update react monorepo to v18 (major) (react, react-dom)
• Click on this checkbox to rebase all open PRs at once

Ignored or Blocked

These are blocked by an existing closed PR and will not be recreated unless you click a checkbox below.

• fix(deps): update dependency react-easy-crop to v4.7.5
• chore(deps): update dependency @svgr/webpack to v8

Detected dependencies

• Check this box to trigger a request for Renovate to run again on this repository

We've gotten a couple requests now from users with arm and arm64 (Raspberry Pi, Apple M1). The main sticking point seems to be WebP. The library is fairly portable and some users have even managed to install libwebp, but Pixlet still doesn't seem to build.

• Investigate & resolve blockers for ARM installations.
• Document how to install on Raspberry Pi.
• Document how to install on M1.

There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.

Error type: undefined. Note: this is a nested preset so please contact the preset author if you are unable to fix it yourself.

I don't see a number option in the schema docs. It would be nice to have a number schema (perhaps with min/max limits) for user settings; I believe the current solution would be to either use a text field or a dropdown.

Example: I was considering adding an option to BigClock for "lightness" (effectively "brightness"; using the same color functions added here), so that lightness could be user configurable. Currently, there is a color value coded for "Dark Red", and I was thinking that it would be best to remove that value, and allow the user to select "lightness" independent of the color. (An even better option would be a more robust color picker schema, but a number schema could still be useful!)

Error: module has no .Sequence field or method

The Sequence widget isn't making into the module exports. From debug:

[onebusaway2.star] ["Animation", "Box", "Circle", "Column", "Image", "Marquee", "Padding", "Plot", "Root", "Row", "Stack", "Text", "WrappedText", "fonts"]
2022/05/19 13:56:14 error loading applet: error running script: Traceback (most recent call last):
  onebusaway2.star:39:22: in main
Error: module has no .Sequence field or method
^C
$ pixlet version
Pixlet version: v0.17.6

Img -> base64

After reading over the bitcoin tutorial, I noticed there were a few missing pieces. Primarily, how to convert your image to a base64 to then be decoded by the library. I found an website that seemed to do the trick but I ended up getting errors when I tried to server the generated webp file. Can you provide further information of your process for conversion?

Recommended size of pixel art

Obviously this was able to be inferred based on the size and dimensions of the provided bitcoin logo however further documentation and recommendations on optimal pixel art image sizing would be a helpful addition to the documentation.

I'm working on a little app to pull some activity data from Strava and render it to Tidbyt (see https://github.com/pepijnve/tidbyt/blob/master/strava.star). Strava requires OAuth authentication these days (the older perpetual API tokens no longer work). You typically only want to do the OAuth authorization exchange once and then hold on to the received token for future runs.

I initially thought I was going to be able to use the cache module for this, but that's only an ephemeral in-memory implementation at the moment. Is there a supported means of storing/loading bits of data for use across render runs?

I'd love the ability to scroll paragraphs of text vertically. Context: I'm working on a "Word of the Day" app and often there's not enough room to fit the definition. A horizontal marquee is a bit awkward for this use case - I want as much text displayed as possible.

The text in a render.WrappedText is cut if the parameter linespacing is used and no heigth is provided.

The above image is generated with this code:

def display_error(msg):
    return render.Root(
        child = render.Row(
            children = [
                render.Box(
                    width = 20, 
                    height = 32, 
                    color = "#000", 
                    child = render.Image(
                        src = ERROR_ICON, 
                        width = 16, 
                        height = 16
                    )
                ),
                render.Box(
                    padding = 0, 
                    width = 44, 
                    height = 32, 
                    child = 
                    render.WrappedText(
                        content = msg, 
                        color = "#FFF", 
                        linespacing = 1,                        
                        font = FONT_TO_USE
                    )
                ),
            ],
        ),
    )

If the linespacing is removed, the text is rendered correctly.