Git Product home page Git Product logo

nspanel-frickelui's Introduction

nspanel-frickelui

frickel-ui-home frickel-ui-mail frickel-ui-alarm frickel-ui-lights frickel-ui-shutters frickel-ui-garage

Disclaimer:

I uploaded my custom NSPanel UI because some of you asked for it after watching https://www.youtube.com/watch?v=MCayBntBlqk. The project was released as is and this ui is absolutely tailored to my needs, so I'm not sure if you find it useful. If it fits for you: go for it! But I don't plan any further development or adjustments. If you want this, you have to do it yourself and use my files as a base. But be warned, working with the Nextion display is anything but straightforward and takes up a lot of time.

Quick notes I wrote down for myself to remember (sorry, not a full guide, maybe later)

  • Flash Tasmota on the NSPanel (search the net for existing tutorials)
  • copy nspanel.be to Tasmota Filesystem
  • adjust/copy autoexec.be to load nspanel.be
  • Start the Tasmota Console and run the following command: FlashNextion http://openhab:8080/static/fickelui.tft
  • Hint: I used the openhab web server to provide the file, but you can use any webserver that tasmota can reach. The Reason you need a Webserver is, that the file is to large to copy on the esp32, so it has to be streamed chunk by chunk when flashing the nextion display
  • if the flash process hangs, restart and try again (the display was then oddly rotated by 90°, but normal again after flashing)
  • Create a MQTT thing in openhab with 3 channels:
UID: mqtt:topic:aba3b3fea8:d72f7479da
label: NSPanel Haustür
thingTypeUID: mqtt:topic
configuration: {}
bridgeUID: mqtt:broker:aba3b3fea8
channels:
  - id: Command
    channelTypeUID: mqtt:string
    label: Command
    description: ""
    configuration:
      commandTopic: cmnd/nspanel/nextion
  - id: Result
    channelTypeUID: mqtt:string
    label: Result
    description: ""
    configuration:
      stateTopic: tele/nspanel/RESULT
      transformationPattern: JSONPATH:$.nextion
  - id: Buzzer
    channelTypeUID: mqtt:string
    label: Buzzer
    description: ""
    configuration:
      commandTopic: cmnd/nspanel/buzzer
  • create a rule in openhab to feed the display with data and react to touch events (see NSPanel.rules)

Hint: I do not use the json protocol from Sonoff to communicate with the nextion panel, but the standard instruction set from nextion -> https://nextion.tech/instruction-set/ e.g.: to change the weather icon to "new mail arrived" you have to send home.weather_icon.pic=57 as plain text to the cmnd/nspanel/nextion mqtt topic. You can also test commands directly on the Tasmota console by typing Nextion home.weather_icon.pic=57

nspanel-frickelui's People

Contributors

frickelzeugs avatar

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.