Suche einfaches Pop-up Widget ohne View zu erstellen

hg6806

Hallo zusammen,

ich suche ein Widget welches ein PopUp Window für einige Sekunden auslöst um einen einfachen Datenpunkt anzuzeigen (Timestamp).
Das Widget sollte sich als unsichtbaren Rahmen Trigger konfigurieren lassen, wie "basic - HTML navigation".

Kennt da jemand was?

OliverIO

@hg6806

Das in ein html Widget
https://stackoverflow.com/questions/1328723/how-to-generate-a-simple-popup-using-jquery

Und dann an der richtigen Stelle den datenpnkt mit Binding einfügen

hg6806

Danke für die Antwort.
Sorry, bei Stackoverflow bin ich raus. Ich bin kein Programmierer und verstehe da nur Bahnhof.
Ich hatte jetzt HTML Dialog versucht, hier wird aber das Widget an sich als weißen Block dargestellt, und beim Pop-Up weiß ich nicht wie man den Wert da anzeigen kann.

sigi234

@hg6806
Inventwo Widgets

liv-in-sky

wie wäre es mit einem popup

scrennmovie (2).gif

hg6806

@liv-in-sky
Genau, wie bekommt man das?

liv-in-sky

@hg6806

habe ich gestern nur schnell zusammengesucht - kann/muss man evtl noch einiges ändern - der datenpunkt zum anzeigen ist in zeile 66 einzutragen - aber zum testen der

import

[{"tpl":"tplHtml","data":{"g_fixed":false,"g_visibility":false,"g_css_font_text":false,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","refreshInterval":"0","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"html":"\n<style>\n/* Popup container - can be anything you want */\n.popup {\n  position: relative;\n  display: inline-block;\n  cursor: pointer;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n}\n\n/* The actual popup */\n.popup .popuptext {\n  visibility: hidden;\n  width: 160px;\n  background-color: #555;\n  color: #fff;\n  text-align: center;\n  border-radius: 6px;\n  padding: 8px 0;\n  position: absolute;\n  z-index: 1;\n  bottom: 125%;\n  left: 50%;\n  margin-left: -80px;\n}\n\n/* Popup arrow */\n.popup .popuptext::after {\n  content: \"\";\n  position: absolute;\n  top: 100%;\n  left: 50%;\n  margin-left: -5px;\n  border-width: 5px;\n  border-style: solid;\n  border-color: #555 transparent transparent transparent;\n}\n\n/* Toggle this class - hide and show the popup */\n.popup .show {\n  visibility: visible;\n  -webkit-animation: fadeIn 1s;\n  animation: fadeIn 1s;\n}\n\n/* Add animation (fade in the popup) */\n@-webkit-keyframes fadeIn {\n  from {opacity: 0;} \n  to {opacity: 1;}\n}\n\n@keyframes fadeIn {\n  from {opacity: 0;}\n  to {opacity:1 ;}\n}\n</style>\n</head>\n<body style=\"text-align:center\">\n\n<h2>Popup</h2>\n\n<div class=\"popup\" onclick=\"myFunction()\">Datenpunkt Info\n  <span class=\"popuptext\" id=\"myPopup\">{javascript.0.variables.dayTime}</span>\n</div>\n\n<script>\n// When the user clicks on div, open the popup\nfunction myFunction() {\n  var popup = document.getElementById(\"myPopup\");\n  popup.classList.toggle(\"show\");\n}\n</script>\n"},"style":{"left":"779px","top":"421px"},"widgetSet":"basic"}]

hg6806

@liv-in-sky
So, vielen Dank, habe es endlich mal ausprobiert.
Wie bekomme ich die Uhrzeit von der letzten Änderung des Datenpunktes angezeigt?

liv-in-sky

@hg6806

wie soll das format der zeit sein - nur zeit oder auch datum

hg6806

@liv-in-sky
Am besten beides

liv-in-sky

@hg6806

teste mal - du musst deinen dp einsetzen ung. zeile 73

[{"tpl":"tplHtml","data":{"g_fixed":false,"g_visibility":false,"g_css_font_text":true,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","refreshInterval":"0","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"html":"\n<style>\n/* Popup container - can be anything you want */\n.popup {\n  position: relative;\n  display: inline-block;\n  cursor: pointer;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n}\n\n/* The actual popup */\n.popup .popuptext {\n  visibility: hidden;\n  width: 260px;\n  background-color: #555;\n  color: #fff;\n  text-align: center;\n  border-radius: 6px;\n  padding: 8px 0;\n  position: absolute;\n  z-index: 1;\n  bottom: 125%;\n  left: 50%;\n  margin-left: -80px;\n}\n\n/* Popup arrow */\n.popup .popuptext::after {\n  content: \"\";\n  position: absolute;\n  top: 100%;\n  left: 50%;\n  margin-left: -5px;\n  border-width: 5px;\n  border-style: solid;\n  border-color: #555 transparent transparent transparent;\n}\n\n/* Toggle this class - hide and show the popup */\n.popup .show {\n  visibility: visible;\n  -webkit-animation: fadeIn 1s;\n  animation: fadeIn 1s;\n}\n\n/* Add animation (fade in the popup) */\n@-webkit-keyframes fadeIn {\n  from {opacity: 0;} \n  to {opacity: 1;}\n}\n\n@keyframes fadeIn {\n  from {opacity: 0;}\n  to {opacity:1 ;}\n}\n</style>\n</head>\n<body style=\"text-align:center\">\n\n<h2>Popup</h2>\n\n<div class=\"popup\" onclick=\"myFunctionForPOP()\">Datenpunkt Info\n  <span class=\"popuptext\" id=\"myPopup\">123<br>234</span>\n</div>\n\n<script>\n\n function myFunctionForPOP() {\n     \n     objID=val='0_userdata.0.CONTROL-OWN.AAATEST.AARolladen';\n    servConn.getStates(objID, (error, states) => {\n        console.log(states[val].lc);\n        var helper=states[val].lc;\n       console.log(\"da     \"+ String(new Date(helper).toLocaleTimeString(\"de-DE\")) + '<br>' + String(new Date(helper).toLocaleDateString(\"de-DE\"))); \n       var ausgabeDP= String(new Date(helper).toLocaleTimeString(\"de-DE\")) + \" am \" + String(new Date(helper).toLocaleDateString(\"de-DE\"));\n     \n  var popup = document.getElementById(\"myPopup\");\n  $(\".popuptext\").text(ausgabeDP);\n  console.log(\"myfunction\"+ ausgabeDP);\n   popup.classList.toggle(\"show\");\n  \n})}\n\n\n\n\n\n</script>\n","lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0},"style":{"left":"624px","top":"647px","color":"#1c9233","width":"344px","height":"163px"},"widgetSet":"basic"}]

hg6806

Also, ich bekomme es zwar angezeigt, jedoch schaffe ich es nicht "Popup" zu entfernen. Wenn ich die Zeile

<h2>Popup</h2>

entferne, wird ein Teil des Popup Fensters beschnitten.

liv-in-sky

@hg6806

probier mal den hier - geht autom. zu:

AApossis (145).gif

es hat sich aber etwas geändert - mich hat gestört, dass sich zwei von diesen "widgets" gegenseitig beeinflußt haben - jetzt kann mn so viel im project haben, wie man will

du musst aber folgendes in den script- tab kopieren - und in jedem widget deinen datenpunkt eingeben

Image 4.png

hier das script:

function myFunctionForPOP(widgeet,cl) {
    console.log(JSON.stringify(cl));
    var classList=cl
   /* console.log("cl von 0 : "+cl[0]);*/
    var theID="myPopup"+cl[0].replace("popup","")
 /*   console.log(theID)*/
    objID=val='0_userdata.0.CONTROL-OWN.AAATEST.AARolladen';
   servConn.getStates(objID, (error, states) => {
       console.log(states[val].lc);
       var helper=states[val].lc;
      console.log("da     "+ String(new Date(helper).toLocaleTimeString("de-DE")) + '<br>' + String(new Date(helper).toLocaleDateString("de-DE"))); 
      var ausgabeDP= String(new Date(helper).toLocaleTimeString("de-DE")) + " am " + String(new Date(helper).toLocaleDateString("de-DE"));
 /* console.log("myPopup"+cl[0])  */
 var popup = document.getElementById(theID);
/*  console.log("popup ausgabe : "+popup) */
 $("."+cl[0]+"text").text(ausgabeDP);
/*  console.log("myfunction"+ ausgabeDP);*/
  popup.classList.toggle("show");
  setTimeout(function() {
       document.getElementById(theID).classList.toggle("show");
       console.log("wait");
   }, 5000);
 
})}

[{"tpl":"tplHtml","data":{"g_fixed":false,"g_visibility":false,"g_css_font_text":true,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":true,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","refreshInterval":"0","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"html":"<style>\n/* Popup container - can be anything you want */\n.popup{wid} {\n  position: relative;\n  display: inline-block;\n  cursor: pointer;\n  color: #fff;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n}\n\n/* The actual popup */\n.popup{wid} .popup{wid}text {\n  visibility: hidden;\n  width: 260px;\n  background-color: #555;\n  background: linear-gradient(135deg, #6db3f2 0%,#54a3ee 29%,#3690f0 58%,#1e69de 100%);\n  color: #fff;\n  text-align: center;\n  border-radius: 6px;\n  padding: 28px 0;\n  position: absolute;\n  z-index: 1;\n  bottom: 0%;\n  left: 50%;\n  margin-left: -80px;\n}\n\n/* Popup arrow */\n .popup{wid}  .popup{wid}text {\n  content: \"\";\n  position: absolute;\n  top: 100%;\n  left: 50%;\n  margin-left: -5px;\n  border-width: 5px;\n  border-style: solid;\n  border-color: #555 transparent transparent transparent;\n}\n\n/* Toggle this class - hide and show the popup */\n.popup{wid} .show {\n  visibility: visible;\n  -webkit-animation: fadeIn 1s;\n  animation: fadeIn 1s;\n}\n\n/* Add animation (fade in the popup) */\n@-webkit-keyframes fadeIn {\n  from {opacity: 0;} \n  to {opacity: 1;}\n}\n\n@keyframes fadeIn {\n  from {opacity: 0;}\n  to {opacity:1 ;}\n}\n\n .abstand{wid}{\n     padding-top: 40px;\n }\n</style>\n\n\n<span class=\"abstand{wid}\">&ensp;</span>\n<span></span>\n<div class=\"popup{wid}\" onclick=\"myFunctionForPOP({wid},classList)\">Datenpunkt Info\n  <span class=\"popup{wid}text\" id=\"myPopup{wid}\">123<br>234</span>\n</div>\n","lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0},"style":{"left":"610px","top":"569px","color":"","width":"428px","height":"104px","border-width":"1px","border-style":"dotted","border-color":"#FFFFFF"},"widgetSet":"basic"},{"tpl":"tplHtml","data":{"g_fixed":false,"g_visibility":false,"g_css_font_text":true,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":true,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","refreshInterval":"0","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"html":"<style>\n/* Popup container - can be anything you want */\n.popup{wid} {\n  position: relative;\n  display: inline-block;\n  cursor: pointer;\n  color: #fff;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n}\n\n/* The actual popup */\n.popup{wid} .popup{wid}text {\n  visibility: hidden;\n  width: 260px;\n  background-color: #555;\n  background: linear-gradient(135deg, #e6f0a3 0%,#d2e638 27%,#d2e638 27%,#c3d825 47%,#c3d825 62%,#dbf043 100%);\n  color: #fff;\n  text-align: center;\n  border-radius: 6px;\n  padding: 28px 0;\n  position: absolute;\n  z-index: 1;\n  bottom: 0%;\n  left: 50%;\n  margin-left: -80px;\n}\n\n/* Popup arrow */\n .popup{wid}  .popup{wid}text {\n  content: \"\";\n  position: absolute;\n  top: 100%;\n  left: 50%;\n  margin-left: -5px;\n  border-width: 5px;\n  border-style: solid;\n  border-color: #555 transparent transparent transparent;\n}\n\n/* Toggle this class - hide and show the popup */\n.popup{wid} .show {\n  visibility: visible;\n  -webkit-animation: fadeIn 1s;\n  animation: fadeIn 1s;\n}\n\n/* Add animation (fade in the popup) */\n@-webkit-keyframes fadeIn {\n  from {opacity: 0;} \n  to {opacity: 1;}\n}\n\n@keyframes fadeIn {\n  from {opacity: 0;}\n  to {opacity:1 ;}\n}\n\n .abstand{wid}{\n     padding-top: 40px;\n }\n</style>\n\n\n<span class=\"abstand{wid}\">&ensp;</span>\n<span></span>\n<div class=\"popup{wid}\" onclick=\"myFunctionForPOP({wid},classList)\">Datenpunkt Info\n  <span class=\"popup{wid}text\" id=\"myPopup{wid}\">123<br>234</span>\n</div>\n","lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0},"style":{"left":"609px","top":"704px","color":"","width":"428px","height":"104px","border-width":"1px","border-style":"dotted","border-color":"#FFFFFF"},"widgetSet":"basic"},{"tpl":"tplHtml","data":{"g_fixed":false,"g_visibility":false,"g_css_font_text":true,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":true,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","refreshInterval":"0","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"html":"<style>\n/* Popup container - can be anything you want */\n.popup{wid} {\n  position: relative;\n  display: inline-block;\n  cursor: pointer;\n  color: #fff;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n}\n\n/* The actual popup */\n.popup{wid} .popup{wid}text {\n  visibility: hidden;\n  width: 260px;\n  background-color: #555;\n  background: linear-gradient(135deg, #efc5ca 0%,#d24b5a 34%,#ba2737 51%,#f18e99 100%);\n  color: #fff;\n  text-align: center;\n  border-radius: 6px;\n  padding: 28px 0;\n  position: absolute;\n  z-index: 1;\n  bottom: 0%;\n  left: 50%;\n  margin-left: -80px;\n}\n\n/* Popup arrow */\n .popup{wid}  .popup{wid}text {\n  content: \"\";\n  position: absolute;\n  top: 100%;\n  left: 50%;\n  margin-left: -5px;\n  border-width: 5px;\n  border-style: solid;\n  border-color: #555 transparent transparent transparent;\n}\n\n/* Toggle this class - hide and show the popup */\n.popup{wid} .show {\n  visibility: visible;\n  -webkit-animation: fadeIn 1s;\n  animation: fadeIn 1s;\n}\n\n/* Add animation (fade in the popup) */\n@-webkit-keyframes fadeIn {\n  from {opacity: 0;} \n  to {opacity: 1;}\n}\n\n@keyframes fadeIn {\n  from {opacity: 0;}\n  to {opacity:1 ;}\n}\n\n .abstand{wid}{\n     padding-top: 40px;\n }\n</style>\n\n\n<span class=\"abstand{wid}\">&ensp;</span>\n<span></span>\n<div class=\"popup{wid}\" onclick=\"myFunctionForPOP({wid},classList)\">Datenpunkt Info\n  <span class=\"popup{wid}text\" id=\"myPopup{wid}\">123<br>234</span>\n</div>\n","lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0},"style":{"left":"611px","top":"842px","color":"","width":"428px","height":"104px","border-width":"1px","border-style":"dotted","border-color":"#FFFFFF"},"widgetSet":"basic"}]

Community Forum

NEWS

Suche einfaches Pop-up Widget ohne View zu erstellen

Support us

613

32.8k

82.8k

1.3m