edfungus / crouton Goto Github PK

I am trying to build it locally but the bower install fails.

bower ECONFLICT Unable to find suitable version for polymer

Hy! Thanks for your great project! I tried to install on my own server with npm install. But when I run and check in the browser, the browser show blank screen. And I see 404:1Uncaught SyntaxError: Unexpected token < on console. Can you help me ? Thanks a lot!

I just want to share a simple idea that came to my mind when I saw the following:

(Source: https://creativetacos.com/free-ocean-flat-ui-kit/)

Sometimes you want a more compact GUI card, with multiple functions inside. The card could combine buttons, sliders, toogle switches. I would limit the option to 4 entries.

Or as a UI feature (only at the UI side, not on MQTT) you could add this as a group element to group multiple controls into a single one. This can be also useful for grouping cards from multiple device that still belong together. For example a music player control and a light switch.

I start the web app as so:
node app.js
It produces output:
Crouton started at http://localhost:8080
There is a white page when I go to http://localhost:8080
What am I doing wrong?

hello Edmund

I forked your repository some time ago and I was able to install and add some features that i needed.
some days ago i cloned again your repo but I got this error running npm install:

ECONFLICT Unable to find suitable version for webcomponentsjs

is this a problem in my environment or there is a some change in the global dependencies that causes this issue?

Hi, A couple days I found this app but i can't get that this working, I have installed node.js anda know I am working with node-red and mqtt mosca, but with Crouton I don't even get star the app, the guie

$ git clone https://github.com/edfungus/Crouton.git
$ npm install
$ grunt

Don´t work, You have any manual for dummies?

When I set my title to "Temperature inside (°C)" or "Humidity inside (%)"
or
when I set the units to "°C" or "%"
Crouton cannot connect to the device.
Any way to use this kind of characters in the title or units?

I'm trying to show a 'last alarms' list using "crouton-simple-text" card.
I try to use '
' or '\n' as a line separator with no success.
Thanks for your nice work!

Can you maybe please show me where in the code the color scheme could be changed (for example to make a dark theme).

Also is there a possibility to add an advanced graph, with X and Y axis (visually like Grafana-style) to the dashboard or are just pie charts available.

Hello, Very nice software!

I am testing communication and if I understood correctly. Should be sufficient post mosquitto_pub -r -t /outbox/testdev/lwt -m 'stillAlive' -k 5 --will-topic /outbox/pimatic/lwt --will-payload 'died' --will-retain.
Add devices to a Crouton, start connect and obtaining get on inbox topic.
I will send mosquitto_pub -t '/outbox/testdev/deviceInfo' -m '{"deviceInfo": {"name": "testdev", "endPoints": {"barDoor": {"title": "Bar Main Door", "card-type": "crouton-simple-text", "units": "people entered",}}, "description": "IOT devices", "status": "good"}}'.

The device is not added. I missed something?

The python demo code consists of a crouton-simple-dropdown widget. It is displayed on the crouton website, but not functional. If you change a value, nothing happens. It is also not described in the docs. I can imagine that this widget could be really helpful.

I am not sure where the issue is located (crouton or python demo), but the docs are missing for sure.

I can't find it in the docs nor in the code. Where do I setup which broker crouton should use? When I open the site on port 9000 I just get a blank page.

During installation bower asked for a version for materializejs. I chose 1.0.something, which was the newest.

I have installed crouton as it is mentioned above. But when I try to go to http://localhost:9000 it only shows a blank page. Can anyone help me out?

Chrome console shows this error :

crouton-connect-mqtt.html:132 Uncaught TypeError: this.querySelector(...).validate is not a function

There are several bugs in this demo python client.

1. print() has missing brackets.
2. Device setup JSON is not working properly.
3. Port number should be integer

I would like to fix them out.

Just a heads up, jade has now been changed to pug.

Renaming jade -> pug

Hi,

Thx a lot for creating this cool project....

Had a small question on updating an existing dashboard.
Is there a way to add cards to an existing device dashboard ? (without re-creating the device via the /outbox/"+clientName+"/deviceInfo topic ?

I'm using custom SSL/TLS Client Certs on a private server, are available to use currently?

fyi similar set up to this, http://rockingdlabs.dunmire.org/exercises-experiments/ssl-client-certs-to-secure-mqtt

in crouton-dashboard.jade:

        relayout: function(element){
          if(element){
            this.container.appendChild(element);
            this.pckry.appended(element);
            // for some reason this handle thing doesn't work in firefox
            var draggie = new Draggabilly(element, {
                handle: '.dragger'
            }); 
            //var draggie = new Draggabilly(element);
            this.pckry.bindDraggabillyEvents(draggie);
            element.style.opacity = "1";
            this.pckry.layout();
          } else {
            if(this.pckry){
              this.pckry.layout();
            }
          }
        },

None of the items, or anything within the items, drag at all on firefox v44. If I get rid of the handle, everything will drag, which is annoying. Eliminating the handle makes the animations look funny on Chrome. I tried a lot of different fixes but none of them worked.

I really like the rest of this project, all the other MQTT dashboards are trying to get me to buy something and/or overly complicated. Thanks for making it!

In page http://crouton.mybluemix.net/crouton/connections the three check boxes ("Auto-connect","Save username/password (warning: in plaintext)","Secure Websockets (TLS)") are shown.
When using the Crouton code from the Github in my Raspberry Pi they disappear.

Maybe it has to do with the Polymer version?

Screenshots and Html differences I found on the checkboxes section:

HtmlGvf1.txt
HtmlEdfungus1.txt

Hi,

I just noticed that the rgb slider component has some issues, when I update one bar, the other ones sometimes auto-update as well. I'll have a look at it whenever I can.

I found that grunt was taking more than 90% cpu.
After some Google search I was able to solve it adding a 2 seconds 'interval' option in the "gruntfile.js" file:
watch: {
styles: {
files: [
'public'
],
tasks: ['less', 'pug', 'sync', 'clean'],
options: {
livereload: true,
nospawn: true
}
},
options: {
interval: 2000
}

When I go to http://localhost:9000/#connections I should be able to edit the connection settings.

This is not possible, the buttons and forms are not displayed correctly.

This is what I did:

git clone https://github.com/edfungus/Crouton.git
cd Crouton
npm install
grunt

Hi, there!
Installed Crouton on a Raspberry Pi 3 and was able to start.
Message was "Crouton started at http://localhost:8080", but browsing the url no content was displayed.
Any suggestion ?
When it will work it's a great job.
Thx!

Can you provide any lua sensor examples?
I seem to have trouble connecting to the device if I start monitoring a sensor (wich would block the main thread and make mqtt unresponsive to events...).
Even if I use timers and keep sending all complete deviceInfo on each update, it does not seem to make any difference and I'd prefer not to depend on external stimuli (such as an update event to the mqtt server)
to send the updates.

From #3 by @gilav

Hello

I wanted to know if it's possible to reduce the font-size used in the crouton-simple-text value field. I display a dateTime and the text is way too big.

by the way this is a really nice tool...
gilles

I have created a deviceInfo which is sent to topic /outbox/weather/deviceInfo and it contains

{
  "deviceInfo": {
    "name": "weather",
    "description": "MHC weather display",
    "status": "good",
    "endPoints": {
      "temp_in": {
        "title": "Temperature inside",
        "card-type": "crouton-simple-text",
        "units": "C",
        "values": {
          "value": 0
        }
      },
      "humid_in": {
        "title": "Humidity inside",
        "card-type": "crouton-simple-text",
        "units": "1/100",
        "values": {
          "value": 0
        }
      },
      "heat_in": {
        "title": "Heat index inside",
        "card-type": "crouton-simple-text",
        "units": "C",
        "values": {
          "value": 0
        }
      },
      "temp_out": {
        "title": "Temperature outside",
        "card-type": "crouton-simple-text",
        "units": "C",
        "values": {
          "value": 0
        }
      },
      "humid_out": {
        "title": "Humidity outside",
        "card-type": "crouton-simple-text",
        "units": "1/100",
        "values": {
          "value": 0
        }
      },
      "heat_out": {
        "title": "Heat index outside",
        "card-type": "crouton-simple-text",
        "units": "C",
        "values": {
          "value": 0
        }
      }
    }
  }
}

The endpoints are updated by sending values to /outbox/weather/temp_in, /outbox/weather/humid_in, /outbox/weather/heat_in, /outbox/weather/temp_out, /outbox/weather/humid_out and /outbox/weather/heat_out in the format (e.g.) {"value": 36}.
I verified the correct JSON's on my MQTT dashboard. I am using EMQ.
On the Crouton dashboard -> Connections I can successfull connect to my EMQ broker and add the device weather.
But on the Crouton dashboard -> Dashboard I see only two widgets for Temperature inside and Temperature outside and they are updated whenever the device sends a value. The other endpoints are not shown.
What am I doing wrong?

I have cloned your project and I have also used your website link(http://crouton.mybluemix.net/crouton/connections) to test Crouton and it won't even connect to test.mosquitto.org.

It just states connecting, then not connected?

This is not an issue but a new feature.
I'd like to have a confirmation option for the "crouton-simple-toggle", "crouton-simple-button", cards.
Thanks!

After npm i & grunt i got this output:

Running "less:development" (less) task
>> 22 stylesheets created.

Running "pug:compile" (pug) task
>> 20 files created.

Running "sync:main" (sync) task

Running "clean:0" (clean) task
>> 1 path cleaned.

Running "connect:server" (connect) task
Started connect web server on http://localhost:9000

Running "watch" task
Waiting...

Server is running but I got a error in my browser console (chrome). Site is empty.

Uncaught TypeError: this.querySelector(...).validate is not a function
    at HTMLElement.validateInput (crouton-connect-mqtt.html:132)
    at HTMLElement._annotatedComputationEffect (polymer.html:1599)
    at HTMLElement._effectEffects (polymer.html:1402)
    at HTMLElement._propertySetter (polymer.html:1386)
    at HTMLElement.__setProperty (polymer.html:1395)
    at HTMLElement._applyConfig (polymer.html:1997)
    at HTMLElement._afterClientsReady (polymer.html:1991)
    at HTMLElement._ready (polymer-mini.html:75)
    at HTMLElement._readyClients (polymer-mini.html:83)
    at HTMLElement._ready (polymer-mini.html:71)

Tested with nodejs 6.11.1 and 8.2.1.
What did I do wrong?

Hello

Had connection problem to the broker when not on localhost, but maybe is my fault... Investigate a newly installed crouton at this time, will update this note when I reach a conclusion (if I can)...

best regards

Gilles

What would be the right way to create default mqtt connection on from sever?

Hi,
I really like the concept of Crouton. The describing of the GUI "cards" make a lot of sense to me. However the current layout (topic structure) implies the mqtt device was designed to be used with crouton.

Have you ever thought about decribing existing mqtt topic structures? I will give you an example. Lets asume you have the following mqtt topic structure in your home:

home/livingroom/door/lock -> "true"
home/livingroom/door/cmd <- "lock=true"
home/livingroom/music/title -> "Queen - Dont stop me now"
home/livingroom/music/next <- "anything"
home/livingroom/lights/ledstrip/red -> "255"
home/livingroom/lights/ledstrip/set <- "red=255"

You could then build a crouton interface around those existing topics:

"backDoorLock": {
  "labels":{ [optional]
    "true": "Locked",
    "false": "Unlocked"
  },
  "icons": { [optional]
    "true": "lock",
    "false": "lock"
  },
  "setter": {
    "topic": "home/livingroom/door/cmd",
     "payload_on": "lock=true",
    "payload_off": "lock=false"
  },
  "getter": {
    "topic": "home/livingroom/door/lock",
  }

  "card-type": "crouton-simple-toggle", [required]
  "title": "Employee Door" [optional]
}

This is just an example. A better structure with better names should be considered. Have you thought about this option? It would make the whole thing a bit more complex at describing the device, but can make the mqtt topics more flexible and simpler in its use. Especially if you have an existing mqtt topic structure.

Also a common use case is a media player control over MQTT (at least for me). An example gui i found online:

(Source: https://creativetacos.com/free-ocean-flat-ui-kit/)

Controls would be (all optional):

• Play
• Pause
• Playpause (Use play/pause preferred if available)
• Next
• Previous
• Trackinfo (name, length, image)
• Current play time in seconds
• Volume Control (0-100)
• Mute/unmute

npm WARN [email protected] No repository field.
npm WARN The package jit-grunt is included as both a dev and production dependency.

E:\NEW_PATH\iot\Crouton>grunt
'grunt' is not recognized as an internal or external command,
operable program or batch file.

When using Crouton I'm able to connect to my broker no problem but I'm not able to get Crouton to connect to my device. Please bear with me as I am still new to this. It 's my thinking that Crouton doesn't like what I put out in my deviceInfo topic

[root@localhost ~]# mosquitto_sub -h localhost -t "outbox/deviceInfo/662X50879610058"
{"ts":"2018-09-27T18:45:46Z","d":{"unitTemp":42.43}}
{"ts":"2018-09-27T18:46:45Z","d":{"unitName":"Greg-Ram-6021","serialNumber":"662X50879610058","model":"RAM-6021","version":"4.29","cellIp":"","upTime":683586,"versionLong":"4.29.190.0","pwr":23.84,"unitTemp":42.25,"hostName":"Greg-Ram-6021","intInfo":"lo=127.0.0.1;usb0=192.168.111.1;eth0=192.168.31.122;eth1=192.168.3.1;tun0=10.8.0.2;","cellFirmVer":"","cellFirmNum":"","imei":"","mdn":"","simID":"","imsi":"","cellServType":"","plmn":"","cellChan":0,"wsSig":0,"rssi":0,"ecio":0,"rsrp":0,"rsrq":0,"cellUpTime":0,"cellModTemp":0,"apn":"","dataDay":0,"dataMonth":0,"rxMonth":0,"txMonth":0,"mcc":"","mnc":"","lac":"","cellID":"","smsSent":0,"smsRecieved":0,"gpsAltitude":0,"gpsTime":0,"gpsNumOfSat":0,"gpsFtFromCp":0,"gpsSpeed":0,"gpsCourse":0}}

My assumption is crouton is looking for name, not unitName, is that correct?