Forem: djchadderton

Hallowe'en Unicorn

djchadderton — Fri, 31 Oct 2025 16:26:07 +0000

After tinkering with the Pimoroni Galactic Unicorn LED panel for almost a year, I decided to put together a few different techniques into an animated display for Hallowe'en. I've combined custom sprite animation with scrolling, bordered text, fading between colours and use of bounding boxes to only target one part of the screen.

The setup

First of all, flash the Pico with the Pimoroni custom build of MicroPython, which has built-in support for controlling all of the features of the device as well as the PicoGraphics and Bitbank PNGdec libraries.

The main file imports the standard libraries, initiates the classes needed for the display, creates constants for the display width and height and defines some pen colours:

from galactic import GalacticUnicorn
from picographics import PicoGraphics, DISPLAY_GALACTIC_UNICORN

gu = GalacticUnicorn()
display = PicoGraphics(display=DISPLAY_GALACTIC_UNICORN)

WIDTH = GalacticUnicorn.WIDTH
HEIGHT = GalacticUnicorn.HEIGHT

# Define colours
BLACK = display.create_pen(0, 0, 0)
SKY = display.create_pen(20, 13, 237)
RED = display.create_pen(96, 0, 0)
YELLOW = display.create_pen(127, 80, 0)

Sprite class

I've used the PNG sprite class I created in my article on the Pimoroni Display Pack, which has a similar API to the built-in PicoGraphics sprite but uses PNGs directly rather than converting them, which may cause memory problems for larger images, but with the images I used I had no such issues on the Pico 2 version of the Unicorn.

Here is the class, which I put in its own file:

# pngsprite.py
from pngdec import PNG

class PNGSprite:
    def __init__(self, display, png_file, width, height):
        self.png_file = png_file
        self.width = width
        self.height = height
        self.display = display

    def get_sprite(self, sx, sy, dx, dy, scale=1):
        png = PNG(self.display)
        png.open_file(self.png_file)
        png.decode(dx, dy, scale, source=(sx * self.width, sy * self.height, self.width, self.height))

A spritesheet should be a PNG file in which each sprite image has the same width and the same height. They should be side-by-side on the PNG image with no gaps between them, but there can also be multiple rows.

The three spritesheets used here are defined like this:

from pngsprite import PNGSprite

ghost_sprites = PNGSprite(display, "pacman_ghosts.png", 11, 11)
bat_sprite = PNGSprite(display, "bat3.png", 31, 13)
pumpkin_sprite = PNGSprite(display, "pumpkins.png", 13, 11)

The display variable is passed in, initiated from the PicoGraphics library, then the name of the image file as a string, then the width of each image in the spritesheet in pixels, then the height.

To grab a single image from the spritesheet and display it, you can use the get_sprite() method like so:

spritesheet.get_sprite(sx, sy, dx. dy, scale)

Where sx is the number of the sprite counting from the left and starting from zero on the spritesheet, sy is the number counting down, dx is the number of pixels from the left of the screen where it should be placed (again from zero) and dy the number of pixels from the top.

scale is optional and defaults to 1. It allows scaling up of the image only and only in whole numbers.

Utility functions

There are a few functions that perform useful tasks defined in the main file.

clear_to_colour(), as the name suggests, clears the screen to a particular colour, taking a Pen object, and immediately updates the display.

def clear_to_colour(colour):
    display.set_pen(colour)
    display.clear()
    gu.update(display)

fade_colour() will take two colours and fade between them, taking as individual parameters the R, G and B values of the colours to move from and to, the number of steps to use between them and the delay between each step (optional, defaults to 0.1 seconds).

from utime import sleep

def fade_colour(startR, startG, startB, endR, endG, endB, steps, delay = 0.1):
    for i in range(steps):
        r = startR + (endR - startR) * i // steps
        g = startG + (endG - startG) * i // steps
        b = startB + (endB - startB) * i // steps
        clear_to_colour(display.create_pen(r, g, b))
        sleep(delay)

Sequence player

The final function plays a sequence defined in a separate variable. I put these sequences in a separate file and imported them:

from sequences import ghosts, bats, pumpkin, pumpkin2

Here is the sequence player:

def play_sequence(sequence, spritesheet, background):
    for frame in sequence:
        display.set_pen(background)
        display.clear()
        for sprite in frame["frame"]:
            scale = frame["scale"] if "scale" in frame else 1

            spritesheet.get_sprite(*sprite, scale)

        gu.update(display)
        sleep(frame["pause"])

It takes a list of frames in the sequence, a PNGSprite object and a background colour as a Pen object.

The frames in the sequence list are dictionaries that must have "frame" and "pause" entries and can also have an optional "scale".

frame is a list consisting of a tuple for each object that should be on screen for that frame. There should be four integers in that tuple: the number across in the spritesheet of the desired sprite, the number down, the position across the screen from the left where it should be and the position down.

The pause is the time that this frame lingers on the screen before moving to the next frame.

scale is an integer allowing the image to be scaled up on that frame, defaulting to 1

For example:

ghosts = [
    {"frame": [(2, 0, -10, 0)], "pause": 0.1},
    {"frame": [(3, 0, -9, 0)], "pause": 0.1},
    {"frame": [(2, 0, -8, 0)], "pause": 0.1},
    {"frame": [(3, 0, -7, 0)], "pause": 0.1},
    ...
    ]

This system works well if all sprites are from the spritesheet but falls down if you need to mix images from different sheets.

The sequences

The different sequences are played in a while True infinite loop.

Ghosts

The ghost sequence is pretty straightforward, if a little tedious to programme in individual steps. The spritesheet has Pacman-style ghosts in three different colours on three rows, each with two images of them going left and two going right and a slight animation between the two.

play_sequence(ghosts, ghost_sprites, BLACK)

Bat

This uses the fade to colour function then utilises a spritesheet of a single image that flies past a couple of times then uses scaling to make it seem like it flies at the screen.

    fade_colour(0, 0, 0, 20, 13, 237, 10)
    play_sequence(bats, bat_sprite, SKY)
    clear_to_colour(BLACK)

Pumpkin

This one is a bit more complicated. Firstly a sequence is played of the pumpkin appearing and animating its mouth:

play_sequence(pumpkin, pumpkin_sprite, BLACK)

The blank area next to the pumpkin is defined as a clipping area so the text animation will not bleed into the pumpkin.

win_width = 41
display.set_clip(14, 0, win_width, 11)

The parameters for the scrolling text are defined:

text = "Happy Hallowe'en"
win_x = 14
win_y = 4
scale = 0.4
display.set_font("serif")
msg_width = display.measure_text(text, scale)

In a loop, the text is drawn with a shadow appearing from the right and gradually scrolling off to the left.

for z in range (msg_width + win_width + 2):
        x = win_x - z + win_width
        y = win_y

        clear_to_colour(BLACK)

        # Draw shadow
        display.set_pen(YELLOW)

        for dy in (-1, 0, 1):
            for dx in (-1, 0, 1):
                display.text(text, x + dx, y + dy, -1, scale)

        # Draw text
        display.set_pen(RED)
        display.text(text, x, y, -1, scale)
        gu.update(display)
        sleep(0.1)

The clipping bounds are removed and the pumpkin moves through a different sequence, crossing the screen, before the whole loop goes back to the beginning.

display.remove_clip()

play_sequence(pumpkin2, pumpkin_sprite, BLACK)
clear_to_colour(BLACK)
sleep(1)

The full listing together with my images can be found on Github at https://github.com/djchadderton/halloween-unicorn. It is currently playing in my front window.

I hope you have fun playing around with some of the ideas. I was wondering about turning the display to the vertical for fireworks for 5 November (Bonfire Night here in the UK), then there's Christmas...

Pico Display Pack 2.8"

djchadderton — Thu, 09 Oct 2025 12:25:45 +0000

Pimoroni's Pico Display Pack 2.8" provides a 320 x 240 pixel, 2.8" IPS LCD screen, one RGB LED and four buttons, which can be controlled by a Raspberry Pi Pico or Pico W inserted into the socket on the rear.

Instructions for how to use the various elements of this device and to use PicoGraphics to display things on the screen are scattered across a number of readme files and examples and mixed with instructions for other types of display. The following is an attempt to tease out the important instructions relevant for this specific display, expanded slightly to fill in a few gaps and with a few potentially useful elaborations.

Setting up

Flash the Pico with the Pimoroni custom build of MicroPython, which has built-in support for controlling all of the features of the device as well as the PicoGraphics library. The version used when putting together this article was MicroPython v1.25.0, picow v1.25.0.

Import the PicoGraphics library and the display and instantiate it:

from picographics import PicoGraphics, DISPLAY_PICO_DISPLAY_2
display = PicoGraphics(display=DISPLAY_PICO_DISPLAY_2)

An optional rotate keyword argument to the PicoGraphics initialiser can rotate the display in multiples of 90º so that it can be used in different orientations, including portrait, e.g.

display = PicoGraphics(display=DISPLAY_PICO_DISPLAY_2, rotate=90)

After adding items to the display, it must be refreshed before anything actually appears on it using:

display.update()

The brightness of the backlight can be changed by setting it to any decimal value between 0 and 1.0. Set the backlight to full with:

display.set_backlight(1.0)

The width and height of the display in pixels can be obtained with:

display.get_bounds()

This returns a tuple of (width, height), so the following will extract these as integers into variables:

WIDTH, HEIGHT = display.get_bounds()

Background

If the screen isn't cleared between refreshes, any new elements added will be superimposed onto the existing display.

To clear the screen and set it to one colour, set the pen colour and clear the display:

BLACK_PEN = display.create_pen(0, 0, 0)
display.set_pen(BLACK_PEN)
display.clear()

As with any other changes, the display must be updated for this to take effect.

Set the boundaries within which drawing will occur with:

display.set_clip(x, y, w, h)

This will limit the clear above to just clear or colour one area of the screen. It will also limit the placement of any other items such as text until the clipping is removed with:

display.remove_clip()

Text

To print text to the screen, first set the font. Available bitmap typefaces are bitmap6, bitmap8 and bitmap14_outline; vector typefaces are sans, gothic, cursive, serif_italic and serif. If using vector (Hershey) fonts, set the thickness to something other than the default 1px to make it more readable. Also set the pen colour before adding the text to the screen.

WHITE_PEN = display.create_pen(255, 255, 255)
display.set_font("sans")
display.set_pen(WHITE_PEN)
display.set_thickness(5)
display.text("text to display", 20, 10, 200, 4)

The text parameters are:

string - the text string to draw.
x - distance across in pixels of the top left corner of the first character from the top left corner of the screen.
y - distance down in pixels of the top left corner of the first character from the top left corner of the screen.
wordwrap - number of pixels width before the text breaks onto a new line.
scale - size of text—an integer from 1 to 6 for bitmaps. Vector fonts can use decimal values, including values of less than 1 to scale down.

The last two parameters are optional and can also be used as named as well as positional parameters.

Other optional keyword parameters are:

angle - rotational angle of text (only multiples of 90º work—0, 90, 180, 270, 360—anything else doesn't throw an error but the text will not be displayed). x and y parameters may need adjusting to keep the text on the screen.
spacing - letter spacing in pixels.
fixed_width - set to True to make characters fixed width.

The width of a text string in pixels can be measured using:

width = display.measure_text(text, scale, spacing, fixed_width)

All parameters apart from text are optional (defaulting to 1, 1, False respectively).

A single character can be printed with its ASCII code using:

display.character(char, x, y, scale)

scale is optional and can also be a keyword parameter.

Shapes

Draw a line between two points, x1, y1 and x2, y2, with:

display.line(x1, y1, x2, y2, thickness)

The thickness parameter is optional; default is 1px.

To draw a circle with its centre at x, y and a radius of r:

display.circle(x, y, r)

To draw a rectangle with its top left corner at x, y with width w and height h:

display.rectangle(x, y, w, h)

For a triangle, the x, y coordinates of all three vertices need to be provided:

display.triangle(x1, y1, x2, y2, x3, y3)

For other polygons, provide a list of tuples, each with the x and y coordinates of a vertex:

display.polygon([(x1, y1), (x2, y2), (x3, y3) ...])

A single pixel can be set with:

display.pixel(x, y)

A horizontal line of 1px thickness with its left side at x, y can be drawn with:

display.pixel_span(x, y, length)

Images

JPEGs

To display a JPEG image—which must be small enough to fit in memory for decoding and must not be progressive—first upload it to the Pico. Import BitBank's JPEGDEC library (included in Pimoroni's build of MicroPython), initialise it and open and decode the image, setting the coordinates for where it should appear on the screen:

import jpegdec
j = jpegdec.JPEG(display)

j.open_file("example.jpg")
j.decode(x, y, scale, dither=True)

Parameters are:

x - distance across from top left corner.
y - distance down from top left corner.
scale (optional) - must be one of jpegdec.JPEG_SCALE_FULL, jpegdec.JPEG_SCALE_HALF, jpegdec.JPEG_SCALE_QUARTER or jpegdec.JPEG_SCALE_EIGHTH.
dither (optional, keyword parameter) - whether dithering is applied (seems to default to True).

PNGs

To display an image in PNG format, first upload it to the Pico. Import Bitbank's PNGdec library (included in Pimoroni's build of MicroPython), initialise it and open and decode the image, setting the coordinates for where it should appear on the screen:

import pngdec
png = pngdec.PNG(display)

png.open_file("example.png")
png.decode(x, y)

Parameters are:

x - X coordinate across from top left corner.
y - Y coordinate down from top left corner.

The following are optional keyword arguments:

source - the portion of the image to display given as a 4-integer tuple (x, y, w, h), where x is the distance from the left of the image, y is the distance from the top, w is the width of the portion to be used and h is the height.
scale - use an integer to scale up by a fixed amount or a 2-integer tuple to scale across the x and y axes by different amounts, e.g. scale=(2,4).
rotate - rotates the image clockwise by multiples of 90º.
mode - dithering mode, one of pngdec.PNG_COPY, pngdec.PNG_DITHER and pngdec.PNG_POSTERISE—the last of these is the default.

Sprites

The PicoGraphics support for spritesheets works, but as it only supports 8x8 pixel sprites, they are too small to be useful on the Pico Display and more suited to LED matrix displays.

It should be possible to achieve something similar with a PNG spritesheet, using the source parameter to select a specific part to display as described above. However, the whole spritesheet is loaded into memory, so it may hit memory limits and crash.

The following class would give a similar experience to the built-in spritesheets:

from pngdec import PNG

class PNGSprite:
    def __init__(self, display, png_file, width, height):
        self.png_file = png_file
        self.width = width
        self.height = height
        self.display = display

    def get_sprite(self, sx, sy, dx, dy, scale=1):
        png = PNG(self.display)
        png.open_file(self.png_file)
        png.decode(dx, dy, scale, source=(sx * self.width, sy * self.height, self.width, self.height))

This should be initiated by passing in the display parameter, the name of the PNG file and the width and height of each sprite on the sheet in pixels:

sprite = PNGSprite(display, "spritesheet.png", 100, 100)

One image can then be chosen with the get_sprite method, passing in the number of the sprite counting from the left of the spritesheet then down from the top (counting from 0) then the x and y coordinates of where it should be placed on the screen, e.g.

sprite.get_sprite(0, 0, 0, 0)

An optional 5th parameter for scale can take either an integer to scale the image up proportionately or a 2-integer tuple to scale up the width and height respectively.

LED

To set the onboard LED, the RGBLED class must be imported and initialised with the correct GPIO pins for this device:

from pimoroni import RGBLED
led = RGBLED(26, 27, 28)

Set the colour using:

led.set_rgb(r, g, b)

Buttons

The four buttons use GPIO pins 12, 13, 14 and 15 for the buttons labelled A, B, X and Y respectively. They can be initiated with:

from machine import Pin

button_a = Pin(12, Pin.IN, Pin.PULL_UP)
button_b = Pin(13, Pin.IN, Pin.PULL_UP)
button_x = Pin(14, Pin.IN, Pin.PULL_UP)
button_y = Pin(15, Pin.IN, Pin.PULL_UP)

If a button is pressed, its value() method will return 0; if unpressed it will return 1. Test whether a button has been pressed with, e.g.

if button_y.value() == 0:
    print("Button Y pressed")

Buttons can also be observed using interrupts, leaving the rest of the script to continue rather than looping purely to test for a keypress. For example:

from machine import Pin

# Handler function for when any button pressed
def button_pressed(pin):
    # Parse out pin number from returned value
    pin_no = int(str(pin).split(", ")[0][8:])
    print(pin_no)

    # Compare returned value with each of buttons to see which pressed
    if pin == button_a:
        print("Button A pressed")
    elif pin == button_b:
        print("Button B pressed")
    elif pin == button_x:
        print("Button X pressed")
    elif pin == button_y:
        print("Button Y pressed")

# Attach the interrupt to the pin
button_a.irq(trigger=Pin.IRQ_FALLING, handler=button_pressed)
button_b.irq(trigger=Pin.IRQ_FALLING, handler=button_pressed)
button_x.irq(trigger=Pin.IRQ_FALLING, handler=button_pressed)
button_y.irq(trigger=Pin.IRQ_FALLING, handler=button_pressed)

The trigger tells the interrupt to operate when the signal from the pin changes from 1 to 0 (IRQ_FALLING), while the hander provides the name of the function to run when this condition is met.

The interrupt will return a Pin object to the handler function. In the example above, this is firstly turned into a string so that the GPIO pin number can be parsed out of it, then it is compared directly to the Pin objects already defined earlier in the program to test each in turn to see whether it was pressed.

This is a great little screen with lots of possibilities for useful applications, or it's just fun to tinker with. Hopefully this will help someone to get started with it a bit more easily and perhaps get more out of it.

Inky Frame menu items

djchadderton — Sun, 24 Aug 2025 16:39:13 +0000

Pimoroni offers a range of its own products based around the Raspberry Pi Pico microcontroller, usually with example software that will at least allow you to use them without much work, although the software is often out-of-date and the documentation inadequate to show clearly how it could be modified to do anything other than the default actions.

Some of the products provide a menu system to allow different functions to be selected with buttons on the device, but they use different ways of programming this.

This article looks at the menu system on the Inky Frame series of e-ink displays in an attempt to see how it can be modified to include a new custom item.

Breaking down the code

main.py firstly imports the appropriate class for screen as DISPLAY (select the appropriate line for the screen you are using) and initiates it into the graphics variable, obtaining the WIDTH and HEIGHT of the display from it.

# from picographics import PicoGraphics, DISPLAY_INKY_FRAME as DISPLAY      # 5.7"
from picographics import PicoGraphics, DISPLAY_INKY_FRAME_4 as DISPLAY  # 4.0"
# from picographics import PicoGraphics, DISPLAY_INKY_FRAME_7 as DISPLAY  # 7.3"

graphics = PicoGraphics(DISPLAY)
WIDTH, HEIGHT = graphics.get_bounds()

After the launcher function is defined, all LEDs are turned off—button and warning LEDs—in case any are still on. ih is imported from inky-helper.

ih.clear_button_leds()
ih.led_warn.off()

If A and E are being pressed together or there is no state.json file, launcher() is called to display a menu then loop until a button is pressed.

if ih.inky_frame.button_a.read() and ih.inky_frame.button_e.read():
    launcher()

If a button is pressed in that loop, the update_state method in inky_helper is called to save the name of the selected option into the state.json file, then machine.reset() is called to do a hard reset, e.g.

if ih.inky_frame.button_a.read():
    ih.inky_frame.button_a.led_on()
    ih.update_state("nasa_apod")
    time.sleep(0.5)
    reset()

If the state.json file does exist, the load_state method in inky_helper reads the contents of the file, converts it to JSON then into a dictionary and saves it as the global state variable. It only has one entry with the key "run" holding the name of the file (without the .py extension)

The launch_app method in inky_helper is then called from main, which imports the file for the selected menu item, under the "run" key in the state dictionary, into the global app variable and calls update state to save this back into state.json.

if ih.file_exists("state.json"):
    ih.load_state()
    ih.launch_app(ih.state['run'])

Three values are then injected into the imported app file: graphics, WIDTH and HEIGHT.

ih.app.graphics = graphics
ih.app.WIDTH = WIDTH
ih.app.HEIGHT = HEIGHT

For this to work, each app file must have somewhere in the variable initiation section:

graphics = None
WIDTH = None
HEIGHT = None

An attempt is then made to create a WiFi network connection using the credentials in the secrets.py file, which should define just two variables: WIFI_SSID and WIFI_PASSWORD, which are self-explanatory.

There is a forced garbage collection with gc.collect() to clear some memory, then an infinite while loop begins that goes through the sequence:

call an update() method in the imported file
turn the warn LED on
call a draw() method in the imported file
turn the warn LED off
get the UPDATE_INTERVAL constant from the imported file then call the sleep method in inky_helper to set the RTC wake-up timer go into a sleep mode if on battery or do a regular sleep if on USB power. ## Creating a new menu item

To try this out, this section will create a new file called test.py that will just put up a test message on the screen with the current date and time.

First, import just the parts needed to save memory:

from ntptime import settime
from machine import RTC

In order to create a new item to replace one in the default menu, the file to be imported will need to contain, apart from the new application code:

variables graphics, WIDTH and HEIGHT initialised to None.

graphics = None
WIDTH = None
HEIGHT = None

a constant UPDATE_INTERVAL set to the time in minutes between updates of the screen.

UPDATE_INTERVAL = 5 # set to 5 minutes so don't have to wait too long to see whether it's working

instantiate any other variables required for this file.
```
time_string = None
rtc = RTC()
```

a method update() that gets the new data (a network/Internet connection should be available).

def update():
    global time_string

    try:
        settime()
    except OSError:
        print("Unable to contact NTP server")

    rtc_time = rtc.datetime()
    year, month, mday, weekday, hour, minute, second, subsecond = rtc_time

    if year < 2023:
        time_string = "Unable to update time"
    else:
        time_string = f"{mday:0=2}/{month:0=2}/{year:0=2} at {hour:0=2}:{minute:0=2}"

a method draw() that refreshes the screen with the new data.

def draw():
    global time_string

    graphics.set_font("sans")
    graphics.set_pen(0)
    graphics.clear()
    graphics.set_pen(1)
    graphics.set_thickness(5)
    graphics.text("Test", int(WIDTH / 2) - 120, int(HEIGHT / 2) - 20, 600, 4)
    graphics.set_thickness(3)
    graphics.text(time_string, 0, HEIGHT - 20, 600, 1)
    graphics.update()

Some extra code can be added to the end to mimic the menu's actions so that this can be run as a standalone application, which can be useful for debugging without having to trigger it from the menu each time, which would require two lengthy screen refreshes:

if __name__ == '__main__':
    import inky_helper as ih
    import gc
    from utime import sleep
    from picographics import PicoGraphics, DISPLAY_INKY_FRAME_4 as DISPLAY
    graphics = PicoGraphics(DISPLAY)
    WIDTH, HEIGHT = graphics.get_bounds()

    try:
        from secrets import WIFI_SSID, WIFI_PASSWORD
        ih.network_connect(WIFI_SSID, WIFI_PASSWORD)
    except ImportError:
        print("Create secrets.py with your WiFi credentials")

    gc.collect()
    update()
    draw()
    ih.led_warn.off()

To make it work from the menu, in main.py, one of the default menu items needs to be replaced by the new code. In launcher():

replace the description text for one of the menu items with a description of the new widget, but keep the capital letter at the start, which indicates to the user which button to press to select it, e.g.

graphics.text("A. Test", 35, HEIGHT - 325, 600, 3)

in the while True loop, replace the string in the item equivalent to the one in which the description text has been replaced with the filename (without the .py extension) of the new widget, e.g.

ih.update_state("test")

Here is the full listing of the test.py file with some helpful comments added.

# test.py
from ntptime import settime
from machine import RTC

# Set variables required by menu
graphics = None
WIDTH = None
HEIGHT = None
UPDATE_INTERVAL = 5

# Instantiate time_string and real time clock
time_string = None
rtc = RTC()

# Update data
def update():
    global time_string
    print("Update data...")

    # Set RTC time from network
    try:
        settime()
    except OSError:
        print("Unable to contact NTP server")

    # Get time tuple and unpack it
    rtc_time = rtc.datetime()
    year, month, mday, weekday, hour, minute, second, subsecond = rtc_time

    # If year is before 2023 assume time could not be updated
    if year < 2023:
        time_string = "Unable to update time"
    else:
        # Construct time string, padding each value with leading zeros to 2 digits
        time_string = f"{mday:0=2}/{month:0=2}/{year:0=2} at {hour:0=2}:{minute:0=2}"

# Draw screen
def draw():
    global time_string

    graphics.set_font("sans")

    # Make screen black
    graphics.set_pen(0)
    graphics.clear()

    # Make writing white
    graphics.set_pen(1)

    # Write test text
    graphics.set_thickness(5)
    graphics.text("Test", int(WIDTH / 2) - 120, int(HEIGHT / 2) - 20, 600, 4)

    # Write date and time
    graphics.set_thickness(3)
    graphics.text(time_string, 0, HEIGHT - 20, 600, 1)
    graphics.update()
    print("Draw screen")

# Mimic call from menu if running this file as standalone
if __name__ == '__main__':
    import inky_helper as ih
    import gc
    from utime import sleep

    # Change this next line if you are not running the 4" Inky Frame
    from picographics import PicoGraphics, DISPLAY_INKY_FRAME_4 as DISPLAY
    graphics = PicoGraphics(DISPLAY)
    WIDTH, HEIGHT = graphics.get_bounds()

    try:
        from secrets import WIFI_SSID, WIFI_PASSWORD
        ih.network_connect(WIFI_SSID, WIFI_PASSWORD)
    except ImportError:
        print("Create secrets.py with your WiFi credentials")

    gc.collect()
    print("Updating...")
    update()
    print("Drawing...")
    draw()
    print("Clearing LEDs...")
    ih.led_warn.off()

Talking to the Pico over USB

djchadderton — Tue, 16 Jul 2024 08:27:59 +0000

The Raspberry Pi Pico can be used to create some useful USB peripherals to plug into a regular computer, Pi or otherwise, if you can communicate between the two over USB.

I bought a Pimoroni RGB Keypad when I visited the Raspberry Pi shop in Cambridge to try to do more with a Pico than just activating LEDs and buzzers. But after toying with the examples that flashed pretty colours across the keyboard and mimicked a numeric keypad, I wanted it to do something more useful—and complicated.

What I really wanted was to turn it into a more affordable version of something like an Elgato Stream Deck. While one of the examples had an interesting way to create different mappings of keys that can be switched between by holding down a control key, I really wanted it to be able to switch automatically to a set of predefined keys for whichever app was currently active on my Mac.

The keypad itself can mimic any keypresses on a regular keyboard if the Pico is installed with CircuitPython, so the Pico-to-Mac communication is already set up. For the Mac to communicate with the Pico, I managed to piece the instructions together from various sources. That’s the bit I’ll be bringing together into this article.

To start, you will need a Raspberry Pi Pico with CircuitPython installed plugged into a USB port on the Mac (Linux is similar but the port names will be a little different; Windows is probably similar except the port names will be COM-something, but I don’t have a machine to test this on).

You will need to find out first of all which port the Pico is on. If you have Thonny running and connected to the Pico, the port name will be in the bottom right corner. Mine is /dev/cu.usbmodem1413301. You could also type into a terminal window on the Mac ls -l /dev/cu.* and look for something with a similar name to this.

That is the port that Thonny and the REPL are currently using to communicate with your Pico, but you can also open a second port for data, which is disabled by default. Create a file on the Pico in the root directory called boot.py, or open it if it exists, and add the following code:

import usb_cdc

usb_cdc.enable(data="true")

There is also a console parameter to enable the REPL port, but this is True by default so there is no need to specify it. You will then need to hard reset the Pico to take on that setting—just unplug it and plug it back in again.

To find the name of the new data channel, run the ls -l /dev/cu.* command again in the Mac console and see which new entry appears in the list. For me, it’s /dev/cu.usbmodem1413303.

CircuitPython has a default code file of code.py. Open that and replace anything in it with the following:

import usb_cdc

while True:
    # Check whether any data has been sent
    if usb_cdc.data.in_waiting > 0:
        # read next line of waiting data ending in line ending ('\n')
        data_received = usb_cdc.data.readline().strip().decode("utf-8")
        # Print data to console
        print(f"Message received: {data_received}")

Run this on the Pico and make sure the shell window is open on Thonny, then open a terminal on the Mac. To send a string to the Pico, simply print to that port with echo "Hello pico!" > /dev/cu.modem1413303.

If all has gone well, you should see the message appear in the console in Thonny.

You can send any data you wish from the Mac and program the Pico to react to it however you wish: for example, display something on a screen, control lights, send MIDI data to music equipment, send an e-mail or, as I did, change the mapping of keys on a miniature keypad.

Customising 'focus till morning' in Shortcuts app

djchadderton — Mon, 11 Dec 2023 13:35:20 +0000

I wanted to trigger the Night focus mode on my iPhone using an NFC tag, which should have been straightforward, but Apple has left a few things out of Shortcuts for Focus triggers and dates and times to make it more of a challenge.

The first part is easy. Go to the Shortcuts app, switch to automation from the icon at the bottom and click the plus button, then scroll down to NFC tag and select this (this same process applies whatever you want to use to trigger it—it doesn't have to be an NFC tag).

Make sure you select "Run Immediately" instead of the default "Run After Confirmation" and scan the NFC tag, if you are using this as a trigger.

You can then add an action to turn the correct focus mode on, but there is no option for "until morning" (or "until this evening" during the day), only until turned off, an event ends, you leave a location or a specified time. But it should, in theory, be possible to emulate the "until morning" option by specifying a time as 7AM, like so:

This works fine if you trigger it after midnight, but if before, it throws an error, telling you to choose a time that isn't in the past as it always assumes, oddly, that you mean 7AM on the current day.

You could change this to specify tomorrow at 7AM like this:

This will work if you trigger it before midnight, but if after, it will leave you in sleep mode for more than 24 hours unless you turn it off manually.

The answer I found was to combine these in an if statement with some date formatting tricks I had to look up to change the date to a number, as comparing dates directly doesn't seem to be straightforward in Shortcuts. I did this in a new Shortcut to be triggered by the automation. Here's the sequence:

Add a Date action and set it to current date.
Add a Format Date action to use the output of the previous action and click Show More.
Change Date Format to Custom and use HH as the Format String to pick just the hour (in 24-hour clock format, so 0 to 23)
Add an If action and make sure Formatted Date is selected in the condition. Click on it and choose Number as the Type. You can then choose is greater than as the condition and add 7 for 7AM (or whatever you like) as the comparison.
Under the If, add an action to turn on the Focus mode tomorrow at 7am.
Under Otherwise, add an action to turn it on at 7am, i.e. on the current day.

Here's the final shortcut:

Go back to your automation and add as the only action Run Shortcut...

...then search for this shortcut under whatever name you gave to it.

And that's it! Not as straightforward as I thought it should be, but it works, whatever time of day or night I decide to go to bed.

Use Stimulus for Sender.net signup form in Rails app

djchadderton — Mon, 06 Mar 2023 13:04:42 +0000

If you're using a form from Sender.net to collect e-mail subscribers, you may find it doesn't behave well in a Rails app with Turbo installed.

Sender.net provides a tool in its dashboard for building and formatting signup forms, but it doesn't create HTML for you to insert into your web site; it creates javascript, which pulls the data from their site and puts it into an iframe. Like some other tools that give you only a script tag, it doesn't play nicely with something like Turbo that only replaces parts of the HTML rather than executing a full page refresh from the server.

You may find that it works on first visit, but if you navigate to a different page on your site and back again, the form is just a blank box. The problem is that the code doesn't unload when Turbo executes a page change, so when you go back to the page with the form on it, the code is still in memory and so it doesn't run again. Like I described with TinyMCE, you can use Stimulus to remove the code when the page unloads and replace it when it loads again.

The following assumes you have a Rails app with Stimulus installed, and that you have an account with Sender.net. You will also need to create an embedded form formatted to your liking.

Go to the forms section on Sender.net and click on the Overview button next to the form you wish to use. Scroll down the page, and you will see the javascript you need to add to your head section, which will look something like this:

<script>
  (function (s, e, n, d, er) {
    s['Sender'] = er;
    s[er] = s[er] || function () {
      (s[er].q = s[er].q || []).push(arguments)
    }, s[er].l = 1 * new Date();
    var a = e.createElement(n),
        m = e.getElementsByTagName(n)[0];
    a.async = 1;
    a.src = d;
    m.parentNode.insertBefore(a, m)
  })(window, document, 'script', 'https://cdn.sender.net/accounts_resources/universal.js', 'sender');
  sender('xxxxxxxxxxxxxx')
</script>

You also need to add a div to your page where you want the form to appear:

<div style="text-align: left" class="sender-form-field" data-sender-form-id="xxxxxxxxxxxxxxxxxxx"></div>

If you add the script to the head section of your application.html.erb file, it will be loaded for every page on your site, whether the form is on it or not. This may be fine for you, but I only want it on my homepage, so I've placed it all in the same partial with the script section wrapped in a content_for block, so:

<%= content_for :head do %>
<script>
    ...
</script>
<% end %>

Just before the closing head tag in application.html.erb, put:

<%= yield :head %>

This will automatically place the form on the page, but this is not what we want as, to solve the problem, we need to do this manually. To tell the script not to render the form on load, add ?explicit=true to the end of the URL within the script tags, i.e. make the penultimate line read:

  })(window, document, 'script', 'https://cdn.sender.net/accounts_resources/universal.js?explicit=true', 'sender');

The div tag needs to be wrapped in another div in order to add a Stimulus controller, like so:

<%= tag.div data: {controller: "sender-form", sender_form_signup_id_value: "xxxxxx"} do %>
  <div style="text-align: left" class="sender-form-field" data-sender-form-id="xxxxxxxxxxxxxxxxxxx"></div>
<% end %>

Replace the "xxxxxx" for sender_form_signup_id_value with the ID of the form at the top of the overview page for the form on Sender.net.

In app/javascript/controllers/, create the file sender_form_controller.js

import { Controller } from '@hotwired/stimulus'

export default class extends Controller {
  static values = {
    signupId: String
  }

}

Sender.net provides some code to check whether their form code has yet loaded, which we can adapt for the connect() method, calling the render method to create the form:

connect() {
  if (!window.senderFormsLoaded) {
    window.addEventListener("onSenderFormsLoaded", () => {
      this.render()
      })
  } else {
    this.render()
  }
}

render() {
  window.senderForms.render(this.signupIdValue)
}

The disconnect() method is quite straightforward, just calling the destroy() method and passing the form id:

disconnect() {
  window.senderForms.destroy(this.signupIdValue)
}

A final touch is to prevent these methods from running if this is a Turbo preview:

disconnect() {
  if (!this.preview) window.senderForms.destroy(this.signupIdValue)
}

render() {
  if (!this.preview) window.senderForms.render(this.signupIdValue)
}

get preview () {
  return document.documentElement.hasAttribute('data-turbo-preview')
}

Add the controller to the app/javascript/controllers/index.js file:

import SenderFormController from "./sender_form_controller.js"
application.register("sender-form", SenderFormController)

And that should be it. It doesn't render as quickly as an HTML form as it has to grab code from another server and render it, but at least you won't be left with an empty white box where there should be a form when you navigate away and back again.

Here is the Stimulus controller in full:

import { Controller } from '@hotwired/stimulus'

export default class extends Controller {
  static values = {
    signupId: String
  }

  connect() {
    if (!window.senderFormsLoaded) {
      window.addEventListener("onSenderFormsLoaded", () => {
        this.render()
        })
    } else {
      this.render()
    }
  }

  disconnect() {
    if (!this.preview) window.senderForms.destroy(this.signupIdValue)
  }

  render() {
    if (!this.preview) window.senderForms.render(this.signupIdValue)
  }

  get preview () {
    return document.documentElement.hasAttribute('data-turbo-preview')
  }
}

Upgrade TinyMCE to v6 in Rails/Stimulus

djchadderton — Sat, 11 Feb 2023 16:09:55 +0000

A couple of years ago, I wrote a post on how to integrate the text editor TinyMCE into a Rails app using Stimulus.

While most of that post is still relevant, even after upgrading to Rails 7 and replacing Webpack with esbuild, the upgrade from v5 to v6 of TinyMCE did break a few things, so here's how to get it working again.

First of all, add the upgraded version to package.json by changing

"tinymce": "^5.8.0"

"tinymce": "^6.3.0"

and run the yarn command to update it.

In the Stimulus controller, as well as importing tinymce, you need to import the model, so the start of the controller file will read

import { Controller } from '@hotwired/stimulus'

// Import TinyMCE
import tinymce from 'tinymce/tinymce'
import 'tinymce/models/dom/model'

Some plugins have been removed or incorporated into the main bundle, so delete any import statements for bbcode, colorpicker, contextmenu, fullpage, hr, imagetools, legacyoutput, noneditable, paste, print, spellchecker, tabfocus, textcolor, textpattern, toc.

Within your toolbar entries, rename styleselect to style, e.g.

toolbar: ['styles | bold italic underline strikethrough superscript | blockquote numlist bullist link | alignleft aligncenter alignright | table']

Some other options have changed, so check the documentation on Migrating from TinyMCE 5 to TinyMCE 6 on the TinyMCE web site if anything isn't working as expected.

My current working Stimulus controller in full is:

import { Controller } from '@hotwired/stimulus'

// Import TinyMCE
import tinymce from 'tinymce/tinymce'
import 'tinymce/models/dom/model'

// Import icons
import 'tinymce/icons/default/icons'

// Import theme
import 'tinymce/themes/silver/theme'

// Import plugins

// import 'tinymce/plugins/advlist'
// import 'tinymce/plugins/anchor'
// import 'tinymce/plugins/autolink'
import 'tinymce/plugins/autoresize'
// import 'tinymce/plugins/autosave'
// import 'tinymce/plugins/charmap'
import 'tinymce/plugins/code'
// import 'tinymce/plugins/codesample'
// import 'tinymce/plugins/directionality'
// import 'tinymce/plugins/emoticons'
import 'tinymce/plugins/fullscreen'
import 'tinymce/plugins/help'
// import 'tinymce/plugins/image'
// import 'tinymce/plugins/insertdatetime'
import 'tinymce/plugins/link'
import 'tinymce/plugins/lists'
// import 'tinymce/plugins/media'
// import 'tinymce/plugins/nonbreaking'
// import 'tinymce/plugins/pagebreak'
import 'tinymce/plugins/preview'
// import 'tinymce/plugins/quickbars'
// import 'tinymce/plugins/save'
// import 'tinymce/plugins/searchreplace'
import 'tinymce/plugins/table'
// import 'tinymce/plugins/template'
// import 'tinymce/plugins/visualblocks'
// import 'tinymce/plugins/visualchars'
import 'tinymce/plugins/wordcount'

export default class extends Controller {
  static targets = ['input']

  initialize () {
    this.defaults = {
      autoresize_bottom_margin: 10,
      browser_spellcheck: true,
      content_css: false,
      content_style: `
        html {
          font-family: Roboto, sans-serif; line-height: 1.5;
        }
        h3, h4 {
          font-family: 'Montserrat', sans-serif;
          color: hsla(197, 55%, 26%, 1);
          line-height: 1;
          margin: .9rem 0;
        }
        `,
      invalid_elements: 'span',
      link_context_toolbar: true,
      link_default_target: '_blank',
      link_title: false,
      max_height: 700,
      menubar: false,
      mobile: {
        toolbar: [
          'styles | bold italic underline strikethrough superscript',
          'blockquote numlist bullist link | alignleft aligncenter alignright | table',
          'undo redo | fullscreen preview code help'
        ]
      },
      plugins: 'link lists fullscreen help preview table code autoresize wordcount',
      relative_urls: false,
      skin: false,
      style_formats: [
          { title: 'Heading', format: 'h3' },
          { title: 'Sub Heading', format: 'h4' },
          { title: 'Sub Heading 2', format: 'h5' },
          { title: 'Sub Heading 3', format: 'h6' },
          { title: 'Paragraph', format: 'p'}
      ],
      toolbar: [
        'styles | bold italic underline strikethrough superscript | blockquote numlist bullist link | alignleft aligncenter alignright | table',
        'undo redo | fullscreen preview code help'
              ],
      valid_styles: { '*': 'text-align' }
    }
  }

  connect () {
    // Initialize TinyMCE
    if (!this.preview) {
      let config = Object.assign({ target: this.inputTarget }, this.defaults)
      this.tc = tinymce.init(config)
    }
  }

  disconnect () {
    if (!this.preview) tinymce.remove(this.tc.id)
  }

  get preview () {
    return document.documentElement.hasAttribute('data-turbo-preview')
  }
}

Additional note for upgrading to v7

TinyMCE version 7 has added an extra requirement to specify either the open source GPLv2+ or a commercial licence in the config options object or it will warn in the console that it is running in evaluation mode. Add the following to this.defaults to continue using the open source version:

license_key: "gpl",

Making TinyMCE draggable with Stimulus

djchadderton — Tue, 05 Oct 2021 14:13:46 +0000

My previous post Making TinyMCE work with Rails, Turbolinks and Stimulus looked at how to integrate the full-featured text editor TinyMCE, which can clash with Turbo/Turbolinks and cause issues, into a Rails app using Stimulus.

Another of TinyMCE's little quirks is that it doesn't like to be moved around the page. I had a form with several text editor fields which I wanted to be able to drag to reorder, but whenever I did so, TinyMCE would break.

The only way to make it behave seems to be to remove TinyMCE from every textarea on the page before the drag and reinitialise them all afterwards. A bit of a hassle, but not too difficult with a Stimulus controller.

I used a Stimulus controller I named drag_controller.js to take care of the drag and drop using Sortable (install with yarn add sortablejs), but other packages may work just as well. This is imported at the top of the controller.

import { Controller } from "stimulus"
import Sortable from "sortablejs"

export default class extends Controller {
}

Sortable provides hooks for before it starts to drag and after it has finished called onStart and onEnd, which are perfect for this purpose (if you use another package, they may be named differently).

I therefore added a connect() method:

connect() {
  this.sortable = Sortable.create(this.element, {
    onStart: this.start.bind(this),
    onEnd: this.end.bind(this),
    // Any other settings
  })
}

The this.start() method needs to check that tinyMCE exists on the page, then, if it does, loop through every TinyMCE instance twice: once to store its settings, then again to destroy it (if you try to do this in the same loop, you will be destroying elements in the array you are looping through, which confuses the loop counter, causing it to skip over some).

start() {
  this.settings = []
  if (tinyMCE) {
    tinyMCE.editors.forEach(editor => this.settings.push(editor.settings))
    tinyMCE.editors.forEach(editor => editor.remove())
  }
}

These settings contain the ID for each HTML element that should have a TinyMCE instance attached to it, so there is no need to look for them in order to add them back in the correct place; just loop through the settings and initialise each one.

end() {
  // Some code to update position numbers of elements for sorting
  this.settings.forEach(setting => tinyMCE.init(setting))
}

Just to tidy up, make sure the disconnect method destroys the Sortable (or whatever) instance.

disconnect() {
  this.sortable.destroy()
}

To be honest, it feels a bit dirty to be manipulating TinyMCE elements in a controller that should just be handling drag and drop, but it works. If you know a better, cleaner way, please let me know in the comments.

Making TinyMCE work with Rails, Turbolinks and Stimulus

djchadderton — Fri, 14 May 2021 15:55:41 +0000

TinyMCE is a great text editor as a drop-in replacement for textarea fields in forms, but it doesn't play nicely with Turbolinks, or anything else that doesn't do full page refresh. I've seen a lot of tips for forcing TinyMCE to unload itself through JavaScript before Turbolinks inserts the new content, but I could never get any of them to work. Even the tinymce-rails gem, which is supposed to have the fix built-in, never worked for me.

In the end, I resorted to using the tinymce-rails gem but inserting data-turbolinks-"false" into every link to a page with a form on it to force Turbolinks to do a full page refresh. Not an ideal solution.

Finally, I decided to try to crack how to use TinyMCE properly through Webpack on Rails 6 without any reconfiguring of Webpack itself. Different bits of the solution came from different places, so I've brought together here the method that worked for me.

First of all, in a Rails project with Turbolinks included and StimulusJS installed, install the TinyMCE package through Yarn.

yarn add tinymce

In app/javascript/controllers, create the file tinymce_controller.js. Start with the usual blank Stimulus controller:

import { Controller } from 'stimulus'

export default class extends Controller {
}

You'll need to import TinyMCE itself, plus icons, a theme and a skin from the node package. This will load the included defaults:

// Import TinyMCE
import tinymce from 'tinymce/tinymce'

// Import icons
import 'tinymce/icons/default/icons'

// Import theme
import 'tinymce/themes/silver/theme';

// Import skin
import 'tinymce/skins/ui/oxide/skin.min.css';

You will also need to import each plugin that you intend to use, one at a time, for instance:

import 'tinymce/plugins/autoresize';
import 'tinymce/plugins/code';
import 'tinymce/plugins/fullscreen';

Inside the export, set a target name for the textarea tag:

static targets = ['input']

Set all of your default settings in an initializer method. Make sure you set content_css: false and skin: false as you have already imported both of these so you don't want TinyMCE to look for them in a separate file and give an error when it can't find them. For all other settings, see the TinyMCE main documentation. Here is my method.

initialize () {
  this.defaults = {
    content_css: false,
    skin: false,
    toolbar: [
      'styleselect | bold italic underline strikethrough superscript | blockquote numlist bullist link | alignleft aligncenter alignright | table',
      'undo redo | fullscreen preview code help'
            ],
    mobile: {
      toolbar: [
        'styleselect | bold italic underline strikethrough superscript',
        'blockquote numlist bullist link | alignleft aligncenter alignright | table',
        'undo redo | fullscreen preview code help'
      ]
    },
    plugins: 'link lists fullscreen help preview table code autoresize wordcount',
    menubar: false,
    style_formats: [
      { title: 'Heading 1', format: 'h1' },
      { title: 'Heading 2', format: 'h2' },
      { title: 'Heading 3', format: 'h3' },
      { title: 'Heading 4', format: 'h4' },
      { title: 'Heading 5', format: 'h5' },
      { title: 'Heading 6', format: 'h6' },
      { title: 'Paragraph', format: 'p'}
    ],
    max_height: 700,
    default_link_target: '_blank',
    link_title: false,
    autoresize_bottom_margin: 10,
    link_context_toolbar: true,
    relative_urls: false,
    browser_spellcheck: true,
    element_format: 'html',
    invalid_elements: ['span'],
    content_style: 'html { font-family: Roboto, sans-serif; line-height: 1.5; }'
  }
}

The connect method initiates the app and applies the settings.

connect () {
  let config = Object.assign({ target: this.inputTarget }, this.defaults)
  tinymce.init(config)
}

To make sure the editor loads properly on a page change or a failed submit rather than just showing a textarea, you must include a disconnect method to destroy the app instance.

disconnect () {
  tinymce.remove()
}

In your header (for instance in your application.html.erb file), make sure you include pack tags for both the javascript and the css:

<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
<%= stylesheet_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

(If you are using Turbo, the successor to Turbolinks, change data-turbolinks-track to data-turbo-track.)

On your form, you need to include the tinymce controller in the div surrounding your textarea and add the target name to the textarea itself, e.g.

<div class="field" data-controller="tinymce">
  <=% f.label :body %>
  <%= f.text_area :body, data: { tinymce_target: 'input' } %>
</div>

And that should work. You can even include more than one text box on the same page and they should function independently without interfering with one another.

The full Stimulus controller code that I used with all of the plugins in the current standard package (v5.8.0) to be uncommented if required is below.

import { Controller } from 'stimulus'

// Import TinyMCE
import tinymce from 'tinymce/tinymce'

// Import icons
import 'tinymce/icons/default/icons'

// Import theme
import 'tinymce/themes/silver/theme';

// Import skin
import 'tinymce/skins/ui/oxide/skin.min.css';

// Import plugins

// import 'tinymce/plugins/advlist';
// import 'tinymce/plugins/anchor';
// import 'tinymce/plugins/autolink';
import 'tinymce/plugins/autoresize';
// import 'tinymce/plugins/autosave';
// import 'tinymce/plugins/bbcode';
// import 'tinymce/plugins/charmap';
import 'tinymce/plugins/code';
// import 'tinymce/plugins/codesample';
// import 'tinymce/plugins/colorpicker';
// import 'tinymce/plugins/contextmenu';
// import 'tinymce/plugins/directionality';
// import 'tinymce/plugins/emoticons';
// import 'tinymce/plugins/fullpage';
import 'tinymce/plugins/fullscreen';
import 'tinymce/plugins/help';
// import 'tinymce/plugins/hr';
// import 'tinymce/plugins/image';
// import 'tinymce/plugins/imagetools';
// import 'tinymce/plugins/insertdatetime';
// import 'tinymce/plugins/legacyoutput';
import 'tinymce/plugins/link';
import 'tinymce/plugins/lists';
// import 'tinymce/plugins/media';
// import 'tinymce/plugins/nonbreaking';
// import 'tinymce/plugins/noneditable';
// import 'tinymce/plugins/pagebreak';
// import 'tinymce/plugins/paste';
import 'tinymce/plugins/preview';
// import 'tinymce/plugins/print';
// import 'tinymce/plugins/quickbars';
// import 'tinymce/plugins/save';
// import 'tinymce/plugins/searchreplace';
// import 'tinymce/plugins/spellchecker';
// import 'tinymce/plugins/tabfocus';
import 'tinymce/plugins/table';
// import 'tinymce/plugins/template';
// import 'tinymce/plugins/textcolor';
// import 'tinymce/plugins/textpattern';
// import 'tinymce/plugins/toc';
// import 'tinymce/plugins/visualblocks';
// import 'tinymce/plugins/visualchars';
import 'tinymce/plugins/wordcount';

export default class extends Controller {
  static targets = ['input']

  initialize () {
    this.defaults = {
      content_css: false,
      skin: false,
      toolbar: [
        'styleselect | bold italic underline strikethrough superscript | blockquote numlist bullist link | alignleft aligncenter alignright | table',
        'undo redo | fullscreen preview code help'
              ],
      mobile: {
        toolbar: [
          'styleselect | bold italic underline strikethrough superscript',
          'blockquote numlist bullist link | alignleft aligncenter alignright | table',
          'undo redo | fullscreen preview code help'
        ]
      },
      plugins: 'link lists fullscreen help preview table code autoresize wordcount',
      menubar: false,
      style_formats: [
        { title: 'Heading 1', format: 'h1' },
        { title: 'Heading 2', format: 'h2' },
        { title: 'Heading 3', format: 'h3' },
        { title: 'Heading 4', format: 'h4' },
        { title: 'Heading 5', format: 'h5' },
        { title: 'Heading 6', format: 'h6' },
        { title: 'Paragraph', format: 'p'}
      ],
      max_height: 700,
      default_link_target: '_blank',
      link_title: false,
      autoresize_bottom_margin: 10,
      link_context_toolbar: true,
      relative_urls: false,
      browser_spellcheck: true,
      element_format: 'html',
      invalid_elements: ['span'],
      content_style: 'html { font-family: Roboto, sans-serif; line-height: 1.5; }'
    }
  }

  connect () {
    let config = Object.assign({ target: this.inputTarget }, this.defaults)
    tinymce.init(config)
  }

  disconnect () {
    tinymce.remove()
  }
}

NB This article was written to work with TinyMCE 5. The upgrade to v6 broke a few things; see my follow-up article for how I managed to fix it.