Widget circle-menu

mc-hollin

Hallo Widget-Entwickler,

wäre es möglich folgendes jQuery plugin in ioBroker zu implementieren?

https://github.com/zikes/circle-menu

http://zikes.github.io/circle-menu/examples/

Ich würde gerne oben mittig das circle-menu als View-Navigation nutzen.

Leider bin ich noch nicht soweit dies selber zu programmieren.

Gruss

Holger

Bluefox

Ich finde das Menü nicht so schön.

Es gibt viel bessere:

http://ninodezign.com/45-creative-menu- … -and-css3/

Ich kann überlegen eine oder andere Menü einzubauen. Aber was will man damit steuern?

Entwider werden das Links zu Views, oder URLs oder Filters...

mc-hollin

Das angegebene circle-menu sollte nur die Art der Menüführung darstellen.

Wenn es hier freie schönere alternativen gibt, um so besser.

Also ich würde es für Links zu Views nutzen wollen.

Einen runden Button oben mitte am Rand, der bei Berührung die eingetragenen Views als Button mit Symbol im Kreis anzeigt.

So wie im Bild. Natürlich noch schön gestylt :D

Folgende Parameter würden mir spontan einfallen:

dock (oben, unten, rechts, links)
1-n Views (oder Urls)
Button CSS (Size, Image, Text,…)
822_circle_menu.jpg

simpixo

Wie kann man denn aus so einer Menüvorlage eine Widget für iObroker machen? Könnte das mir mal jemand erklären? :)

mc-hollin

Ich glaube für die Widget-Erstellung ist dies der Ansatz:

http://forum.iobroker.net/viewtopic.php … ung#p13205

smiling_Jack

~~@Bluefox:~~

Ich kann überlegen eine oder andere Menü einzubauen. Aber was will man damit steuern?

Entwider werden das Links zu Views, oder URLs oder Filters… `

Ich habe da auch schon dran gedach ein Zirkelmenu anstat Bars zum View wechsel zu nutzen.

Genauso könte man ein soches Menu nutzen un ein State auf vorgegebene Werte zu setzen (zb. zur Mode Steuerung bei Wolf ;) ). Diese Menus sind halt schön klein auf der View und lass sich recht gut per Touch bedienen eigentlich ein "must have"

Communicate

Hallo zusammen,

ich hätte auch starkes Interesse an so einer Menülösung.

Ich würde mich dran versuchen und das ganze dann auch als Widget zur verfügung stellen (wenn es denn klappen sollte).

Leider bin ich im Moment beruflich stark eingespannt (deshalb ist das Widget set aus dem zitierten Link auch noch nicht veröffentlicht).

Mal schauen, ob und was ich ggf. am Wochenende hinbekommen kann…

Communicate

Hallo zusammen,

ich bin mit einem ersten Widget schon relativ weit.

Woran ich noch scheitere ist folgender Sachverhalt:

Ich möchte einem a href den Inhalt einer Eigenschaft zuweisen, die man vorher in den Widgeteinstellungen erfasst hat.

So sieht der Code aus:

*   [> <%== this.data.attr('link3')%>](#)

Link3 ist der Name der Widget-Eigenschaft. Hier sollte eigentlich der View stehen, zu welchen der Link führen soll.

Doch wie kann ich den in <%== this.data.attr('link3') %> vorhandenen Text in in einen html a Href link umwandeln?

Hat hier jemand einen Tip für mich?
8413_unbenannt.jpg

Bluefox

So?

*   [<%== this.data.attr('link3')%>](#<%== this.data.attr('link3') %>)

mc-hollin

Super!

Dann bekomme ich vielleicht doch noch mein Weihnachtsgeschenk :D

Könntest du beim Widget eventuell eine Möglichkeit einplanen, die es ermöglicht im Mainmenüpunkt immer den aktuellen Text des ausgewählten Submenupunkt anzuzeigen?

Dann sieht man immer was gerade aktuell ist ohne die Views selber zu beschriften.

simpixo

Zeige mal was du da bastelst ;-)

Gesendet von meinem iPhone mit Tapatalk

Communicate

Ich schau mal, ob ich das heute abend zu einer 0.001 Version schaffe.

Aber das ist nur ein allererster Versuch - und auch nur ein einziges Menu - quasi eine Machbarkeitsstunde.

Weiterentwickeln müssen wir die Ideen dann gemeinsam.

Communicate

Hallo zusammen,

so, anbei ein erster Versuch.

Das ganze war für mich eine Machbarkeitsstudie - es ist also noch viel zu tun.

Ich habe mir ein Menü aus dem Link von Bluefox rausgesucht und versucht es als Widget umzusetzen.

Dabei habe ich ein Menu genommen, das auch schön nur mit CSS funktioniert, da ich noch keine

Ahnung habe, wie ich JS in ein Widget integrieren kann.

Hier nun das erste Ergebnis:
515_iobroker.vis-communicate_001.zip
Wenn ich das alles richtig verstanden habe, dann sollte es folgendermaßen funkionieren:

Bitte die Dateien nach

  cd /opt/iobroker/node_modules/iobroker.vis-communicate

entpacken.

Danach

cd /opt/iobroker
iobroker visdebug communicate

Jetzt sollte alles hochgeladen sein, so dass nach einen Reload von vis eine Neues Widgetset "Communicate" vorhanden sein sollte.

Berichtet doch mal, ob es geklappt hat…

Grüße

Dominic

mc-hollin

Klasse,

werde versuchen es heute Abend in der Testumgebung einzubauen.

Ist ja der 1.Advent und da ist der WAF nicht so hoch ;)

pix

Hallo Dominic,

Adapter mit Widget Set entpackt, taucht in Admin auf und lässt sich installieren. Danach allerdings keine Änderung in VIS (7.7), finde die Widgets in der Widgetauswahl nicht.

Admin/Instanzen (log level fehlt noch) 261_bildschirmfoto_2015-11-29_um_18.40.32.jpg
Übrigens: ~~@Communicate:~~

cd /opt/iobroker
iobroker visdebug communicate
```` `  brachte die Anzeige der iobroker Hilfe:

! MacMini-Ethernet:iobroker pix$ ./iobroker visdebug communicate
! Commands:
! iobroker setup [–objects <host>] [–states <host>] [custom]
! iobroker start
! iobroker stop
! iobroker start <adapter>iobroker stop <adapter>iobroker start all
! iobroker restart
! iobroker restart <adapter>iobroker add <adapter>[–enabled] [–host <host>] [–port <port>]
! iobroker install <adapter>iobroker del <adapter>iobroker del <adapter>. <instance>iobroker update [repository url] [–updatable]
! iobroker upgrade [repository url]
! iobroker upgrade self [repository url]
! iobroker upgrade <adapter>[repository url]
! iobroker upload <adapter>iobroker upload all
! iobroker object get <id>iobroker object chmod <object-mode>[state-mode] <id>iobroker object chown <user><group><id>iobroker object list <id>iobroker state get <id>iobroker state getplain <id>iobroker state set <id><value>[ack]
! iobroker list <type>[filter]
! iobroker chmod <mode><file>iobroker chown <user><group><file>iobroker touch <file>iobroker rm <file>iobroker adduser <user>[–ingroup group] [–password pass]
! iobroker deluser <user>iobroker passwd <user>[–password pass]
! iobroker set <adapter>. <instance>[–port port] [–ip address] [–ssl
! true|false]
! iobroker clean
! iobroker backup
! iobroker restore <backup name/or/path="">Optionen:
! --objects [Standard: "127.0.0.1"]
! –states [Standard: "127.0.0.1"]
! –lang [Standard: "en"]</backup></instance></adapter></user></user></user></file></file></file></group></user></file></mode></type></value></id></id></id></id></id></group></user></id></object-mode></id></adapter></adapter></instance></adapter></adapter></adapter></port></host></adapter></adapter></adapter></adapter></host></host>

:?:

Gruß,

Pix

Communicate

Welche ja Controller version hast du?

pix

Js-Controller 0.7.14

Gesendet von meinem iPhone mit Tapatalk

Communicate

ah, ok. dann haben wir da schon das Problem.

Hier in diesem Thread hat Bluefox erwähnt, dass man dafür mindestens 0.7.15 benötigt:

<url url="http://forum.iobroker.net/viewtopic.php?f=30&t=1556&hilit=widget+entwicklung#p13205">~~[http://forum.iobroker.net/viewtopic.php?f=30&t=1556&hilit=widget+entwicklung#p13205 " target="_blank">](</s><LINK_TEXT text=)~~[<link_text text="http://forum.iobroker.net/viewtopic.php … ng#p13205
">http://forum.iobroker.net/viewtopic.php?f=30&t=1556&hilit=widget+entwicklung#p13205</link_text>](</s><LINK_TEXT text=)</url>

Man kann die 0.7.15 wie folgt installieren:

cd /opt/iobroker
sudo iobroker stop
sudo npm install https://github.com/ioBroker/ioBroker.js-controller/tarball/master
sudo iobroker start

Magst Du berichten, ob es geklappt hat - danach können wir dann gemeinsam weiter an den Widgets entwickeln…

Grüße aus dem stürmischen Norden

Dominic

pix

Hallo,

leider habe ich das Update auf 0.7.15 gemacht, bevor ich mehr gelesen habe. Jetzt ist mein Produktivsystem wieder mal abgeschmiert.

Log (ganzer Vorgang im Textfile-Anhang)

! ├── npm@2.14.13
! ├── rimraf@2.4.4
! └─┬ socket.io-adapter@0.3.1
! └─┬ debug@1.0.2
! └── ms@0.6.2
! npm WARN ENOENT ENOENT: no such file or directory, open '/Users/pix/Documents/iobroker/package.json'
! npm WARN ENOENT ENOENT: no such file or directory, open '/Users/pix/Documents/iobroker/node_modules/ftp-response-parser/package.json'
! npm WARN ENOENT ENOENT: no such file or directory, open '/Users/pix/Documents/iobroker/node_modules/jsftp/package.json'
! npm WARN ENOENT ENOENT: no such file or directory, open '/Users/pix/Documents/iobroker/node_modules/mqtt-packet/package.json'
! npm WARN ENOENT ENOENT: no such file or directory, open '/Users/pix/Documents/iobroker/node_modules/node_modules/package.json'
! npm WARN ENOENT ENOENT: no such file or directory, open '/Users/pix/Documents/iobroker/node_modules/through2/package.json'
! npm WARN EPACKAGEJSON iobroker No description
! npm WARN EPACKAGEJSON iobroker No repository field.
! npm WARN EPACKAGEJSON iobroker No README data
! npm WARN EPACKAGEJSON iobroker No license field.
! MacMini-Ethernet:iobroker pix$ ./iobroker start
! Starting ioBroker controller daemon…
! /Users/pix/Documents/iobroker/node_modules/daemonize2/lib/daemonize.js:136
! throw new Error(msg.error);
! ^
! Error: Error: Cannot find module 'socket.io'
! at Function.Module._resolveFilename (module.js:337:15)
! at Function.Module._load (module.js:287:25)
! at Module.require (module.js:366:17)
! at require (module.js:385:17)
! at Object. <anonymous>(/Users/pix/Documents/iobroker/node_modules/iobroker.js-controller/lib/objects/objectsInMemServer.js:8:16)
! at Module._compile (module.js:425:26)
! at Object.Module._extensions..js (module.js:432:10)
! at Module.load (module.js:356:32)
! at Function.Module._load (module.js:311:12)
! at Module.require (module.js:366:17)
! at ChildProcess. <anonymous>(/Users/pix/Documents/iobroker/node_modules/daemonize2/lib/daemonize.js:136:19)
! at emitTwo (events.js:87:13)
! at ChildProcess.emit (events.js:172:7)
! at handleMessage (internal/child_process.js:686:10)
! at Pipe.channel.onread (internal/child_process.js:440:11)
! MacMini-Ethernet:iobroker pix$</anonymous></anonymous>

Zum Glück habe ich TimeMachine und heute etwas Zeit. 261_fehler.txt

Gruß

Pix

Communicate

Oh :-( das tut mir leid. Vielleicht kann bluefox hier unterstützen

von unterwegs gesendet

Community Forum

NEWS

Widget circle-menu

Support us

754

32.6k

82.2k

1.3m