Suche einfaches Pop-up Widget ohne View zu erstellen

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

624

32.8k

82.8k

1.3m