Coder Social home page Coder Social logo

luma screen layout about luma.lcd HOT 11 CLOSED

svenyonson avatar svenyonson commented on September 27, 2024
luma screen layout

from luma.lcd.

Comments (11)

rm-hull avatar rm-hull commented on September 27, 2024

You should have a look at the hotspot and viewport classes: https://luma-core.readthedocs.io/en/latest/api-documentation.html#luma.core.virtual.hotspot. There is a specific example - carousel; that makes use of the hotspot functionality.

The canvas is a convenience wrapper around drawing text and simple line graphics (with whatever methods Pillows ImageDraw supports). You don't have to use it, as you can create am image directly, paste whatever bitmaps onto it, create an ImageDraw layer from that, updating text, etc. and then flush the image to the display with device.display(img)

from luma.lcd.

svenyonson avatar svenyonson commented on September 27, 2024

Thanks, just what I needed.

from luma.lcd.

thijstriemstra avatar thijstriemstra commented on September 27, 2024

A really slick phone-ish interface example would be nice, eg.

x761_17my_ngi_connectivity_tcm76-312913_desktop_1024x576

heat_gauge

from luma.lcd.

svenyonson avatar svenyonson commented on September 27, 2024

Snapshots seem to be the way to go, I have several regions set up and working. One outstanding question though - from within the render function for a snapshot, how can I access paste_into() method of the snapshot so that I can paint an image in the snapshot?

from luma.lcd.

svenyonson avatar svenyonson commented on September 27, 2024

Update: got it working:
draw.bitmap((0,0),wifiIcon)
It looks like the draw parameter of the render function is of type PIL.DrawImage.DrawImage. This is the legacy API, yes?

from luma.lcd.

rm-hull avatar rm-hull commented on September 27, 2024

Yes, the render canvas is indeed a PIL.DrawImage.DrawImage. The "legacy API" is provided by https://luma-core.readthedocs.io/en/latest/api-documentation.html#module-luma.core.legacy - the docs should explain why they are named legacy.

Also: just be aware that Pillow's draw.bitmap does not do exactly what you might think it does - it is a actually mask operation, but if it probably works for your use case, then fair enough.


screen shot 2018-03-30 at 23 40 33


Would be interested to see a screenshot of your app !

from luma.lcd.

svenyonson avatar svenyonson commented on September 27, 2024

Ah, yes it does work for this use case - the icon is all one color with a transparent background, so the mask does pretty much the same thing. But I would very much like to know how to paint an actual bitmap - all colors preserved - from within the render method of a snapshot. Is this possible? Our app is not all that sexy but I will send a screen shot when it is fleshed out.

from luma.lcd.

rm-hull avatar rm-hull commented on September 27, 2024

In short, you can't: the render canvas method encapsulates and manages the image and drawing surface entirely. Either something like (untested):

device = ...
bkgnd = Image.new(device.mode, device.size)
bkgnd.paste(wifiIcon, (0, 0))
with canvas(device, bkgnd) as draw:
    draw.line((0, 0) + device.size, fill=128)
    draw.line((0, device.size[1], device.size[0], 0), fill=128)

or dont use the canvas at all, and initiate an unmanaged draw object:

device = ...
im = Image.new(device.mode, device.size)
im.paste(wifiIcon, (0, 0))
draw = ImageDraw.Draw(im)
draw.line((0, 0) + device.size, fill=128)
draw.line((0, device.size[1], device.size[0], 0), fill=128)
del draw
device.display(im)

[All the canvas context really does is manage creating the draw object and deleting it afterwards]

from luma.lcd.

svenyonson avatar svenyonson commented on September 27, 2024

Thanks Richard, things are working nicely now. Two questions: 1) Is there a way to specify custom RGB colors when using draw(), text(), etc? All I can find are strings like "yellow", "white", etc. 2) Are there any settings I can try to minimize the horizontal bleed from white text into the darker background colors? (eg. contrast, brightness)

2018-04-11 09 44 53

from luma.lcd.

rm-hull avatar rm-hull commented on September 27, 2024

it supports whatever color gamut that Pillow supports, for example, see http://pillow.readthedocs.io/en/5.1.x/reference/ImageColor.html?highlight=color#color-names and https://pillow.readthedocs.io/en/5.1.x/reference/ImageDraw.html#example-draw-partial-opacity-text

You can supply a hex number (in a string, so "#ff0000" is red), or if you supply a 3-tuple (255, 0, 0), then it is a solid color representing the RGB components, else a 4-tuple is RGBA, where the last value is the alpha transparency, eg, (255, 0, 0, 127)

from luma.lcd.

thijstriemstra avatar thijstriemstra commented on September 27, 2024

Update: got it working

Closing.

from luma.lcd.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.