NEWS

rudi123

Hi, hatte wenig Zeit die letzten Tage.

Funktioniert soweit Optimal vielen Dank !

rudi123

Hi , habe nochmal eine Frage habe dieses Navigationsdashboard gefunden.
Wäre es hier auch möglich wenn man durch die Navigationsbar klickt das man einen Input wie auch bei den Radio Buttons bekommt?

Habe es jetzt schon lange Probiert aber mehr als das eine kleine Checkbox irgendwo in einem Icon aufgetaucht ist hab ich nicht geschafft.

Das ist mein Widget mit HTML CSS und dem dazugehörigem Script:

[{"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\n<menu class=\"menu\">\n    \n    <button class=\"menu__item active\" style=\"--bgColorItem: #ff8c00;\" >\n      <svg class=\"icon\"  viewBox=\"0 0 24 24\" >\n        <path d=\"M3.8,6.6h16.4\"/>\n        <path d=\"M20.2,12.1H3.8\"/>\n        <path d=\"M3.8,17.5h16.4\"/>\n      </svg>\n    </button>\n\n    <button class=\"menu__item\" style=\"--bgColorItem: #f54888;\">\n      <svg class=\"icon\" viewBox=\"0 0 24 24\">\n        <path  d=\"M6.7,4.8h10.7c0.3,0,0.6,0.2,0.7,0.5l2.8,7.3c0,0.1,0,0.2,0,0.3v5.6c0,0.4-0.4,0.8-0.8,0.8H3.8\n        C3.4,19.3,3,19,3,18.5v-5.6c0-0.1,0-0.2,0.1-0.3L6,5.3C6.1,5,6.4,4.8,6.7,4.8z\"/>\n        <path  d=\"M3.4,12.9H8l1.6,2.8h4.9l1.5-2.8h4.6\"/>\n      </svg>\n    \n</button>\n\n    <button class=\"menu__item\" style=\"--bgColorItem: #4343f5;\" >\n      <svg class=\"icon\" viewBox=\"0 0 24 24\">\n      <path  d=\"M3.4,11.9l8.8,4.4l8.4-4.4\"/>\n      <path  d=\"M3.4,16.2l8.8,4.5l8.4-4.5\"/>\n      <path  d=\"M3.7,7.8l8.6-4.5l8,4.5l-8,4.3L3.7,7.8z\"/>\n    </button>\n\n    <button class=\"menu__item\" style=\"--bgColorItem: #e0b115;\" > \n      <svg class=\"icon\" viewBox=\"0 0 24 24\" >\n        <path  d=\"M5.1,3.9h13.9c0.6,0,1.2,0.5,1.2,1.2v13.9c0,0.6-0.5,1.2-1.2,1.2H5.1c-0.6,0-1.2-0.5-1.2-1.2V5.1\n          C3.9,4.4,4.4,3.9,5.1,3.9z\"/>\n        <path  d=\"M4.2,9.3h15.6\"/>\n        <path  d=\"M9.1,9.5v10.3\"/>\n    </button>\n\n    <button class=\"menu__item\" style=\"--bgColorItem:#65ddb7;\">\n      <svg class=\"icon\" viewBox=\"0 0 24 24\" >\n        <path  d=\"M5.1,3.9h13.9c0.6,0,1.2,0.5,1.2,1.2v13.9c0,0.6-0.5,1.2-1.2,1.2H5.1c-0.6,0-1.2-0.5-1.2-1.2V5.1\n          C3.9,4.4,4.4,3.9,5.1,3.9z\"/>\n        <path  d=\"M5.5,20l9.9-9.9l4.7,4.7\"/>\n        <path  d=\"M10.4,8.8c0,0.9-0.7,1.6-1.6,1.6c-0.9,0-1.6-0.7-1.6-1.6C7.3,8,8,7.3,8.9,7.3C9.7,7.3,10.4,8,10.4,8.8z\"/>\n      </svg>\n    </button>\n\n    <div class=\"menu__border\"></div>\n\n  </menu>\n\n  <div class=\"svg-container\">\n    <svg viewBox=\"0 0 202.9 45.5\" >\n      <clipPath id=\"menu\" clipPathUnits=\"objectBoundingBox\" transform=\"scale(0.0049285362247413 0.021978021978022)\">\n        <path  d=\"M6.7,45.5c5.7,0.1,14.1-0.4,23.3-4c5.7-2.3,9.9-5,18.1-10.5c10.7-7.1,11.8-9.2,20.6-14.3c5-2.9,9.2-5.2,15.2-7\n          c7.1-2.1,13.3-2.3,17.6-2.1c4.2-0.2,10.5,0.1,17.6,2.1c6.1,1.8,10.2,4.1,15.2,7c8.8,5,9.9,7.1,20.6,14.3c8.3,5.5,12.4,8.2,18.1,10.5\n          c9.2,3.6,17.6,4.2,23.3,4H6.7z\"/>\n      </clipPath>\n    </svg>\n  </div>\n\n<style>\n\n\n\n\n\n\n\n\n\n\n\nhtml {\n\n    box-sizing: border-box;\n    --bgColorMenu : #1d1d27;\n    --duration: .7s;    \n\n}\n\nhtml *,\nhtml *::before,\nhtml *::after {\n\n    box-sizing: inherit;\n\n}\n\nbody{\n    \n    margin: 0;\n\n    height: 100vh;\n    overflow: hidden;\n    align-items: center;\n    justify-content: center;\n    background-color: #ffb457;\n    -webkit-tap-highlight-color: transparent;\n    transition: background-color var(--duration);\n\n}\n\n.menu{\n\n    margin: 0;\n    display: flex;\n    /* Works well with 100% width  */\n    width: 32.05em;\n    font-size: 1.5em;\n    padding:  1.6em;\n    position: relative;\n    align-items: center;\n    justify-content: center;\n    background-color: var(--bgColorMenu);\n    \n}\n\n.menu__item{\n    \n    all: unset;\n    flex-grow: 1;\n    z-index: 100;\n    display: flex;\n    cursor: pointer;\n    position: relative;\n    border-radius: 50%;\n    align-items: center;\n    will-change: transform;\n    justify-content: center;\n    padding: 0.55em 0 0.85em;\n    transition: transform var(--timeOut , var(--duration));\n    \n}\n\n.menu__item::before{\n    \n    content: \"\";\n    z-index: -1;\n    width: 4.2em;\n    height: 4.2em;\n    border-radius: 50%;\n    position: absolute;\n    transform: scale(0);\n    transition: background-color var(--duration), transform var(--duration);\n    \n}\n\n\n.menu__item.active {\n\n    transform: translate3d(0, -.8em , 0);\n\n}\n\n.menu__item.active::before{\n    \n    transform: scale(1);\n    background-color: var(--bgColorItem);\n\n}\n\n.icon{\n    \n    width: 2.6em;\n    height: 2.6em;\n    stroke: white;\n    fill: transparent;\n    stroke-width: 1pt;\n    stroke-miterlimit: 10;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n    stroke-dasharray: 400;\n    \n}\n\n.menu__item.active .icon {\n\n    animation: strok 1.5s reverse;\n    \n}\n\n@keyframes strok {\n\n    100% {\n\n        stroke-dashoffset: 400;\n\n    }\n\n}\n\n.menu__border{\n\n    left: 0;\n    bottom: 99%;\n    width: 10.9em;\n    height: 2.4em;\n    position: absolute;\n    clip-path: url(#menu);\n    will-change: transform;\n    background-color: var(--bgColorMenu);\n    transition: transform var(--timeOut , var(--duration));\n    \n}\n\n.svg-container {\n\n    width: 0;\n    height: 0;\n}\n\n\n@media screen and (max-width: 50em) {\n    .menu{\n        font-size: .8em;\n    }\n}\n\n</style>\n\n\n\n\n\n\n\n\n\n\n\n\n<script>\n\n// Designed by:  Mauricio Bucardo\n// Original image:\n// https://dribbble.com/shots/5619509-Animated-Tab-Bar\n\n\"use strict\"; \n\nconst body = document.body;\nconst bgColorsBody = [\"#ffb457\", \"#ff96bd\", \"#9999fb\", \"#ffe797\", \"#cffff1\"];\nconst menu = body.querySelector(\".menu\");\nconst menuItems = menu.querySelectorAll(\".menu__item\");\nconst menuBorder = menu.querySelector(\".menu__border\");\nlet activeItem = menu.querySelector(\".active\");\n\nfunction clickItem(item, index) {\n\n    menu.style.removeProperty(\"--timeOut\");\n    \n    if (activeItem == item) return;\n    \n    if (activeItem) {\n        activeItem.classList.remove(\"active\");\n    }\n\n    \n    item.classList.add(\"active\");\n    body.style.backgroundColor = bgColorsBody[index];\n    activeItem = item;\n    offsetMenuBorder(activeItem, menuBorder);\n    \n    \n}\n\nfunction offsetMenuBorder(element, menuBorder) {\n\n    const offsetActiveItem = element.getBoundingClientRect();\n    const left = Math.floor(offsetActiveItem.left - menu.offsetLeft - (menuBorder.offsetWidth  - offsetActiveItem.width) / 2) +  \"px\";\n    menuBorder.style.transform = `translate3d(${left}, 0 , 0)`;\n\n}\n\noffsetMenuBorder(activeItem, menuBorder);\n\nmenuItems.forEach((item, index) => {\n\n    item.addEventListener(\"click\", () => clickItem(item, index));\n    \n})\n\nwindow.addEventListener(\"resize\", () => {\n    offsetMenuBorder(activeItem, menuBorder);\n    menu.style.setProperty(\"--timeOut\", \"none\");\n});"},"style":{"left":"142px","top":"412px","width":"772px","height":"175px"},"widgetSet":"basic"}]

rudi123

@oliverio

Hi, hatte wenig Zeit die letzten Tage.

Funktioniert soweit Optimal vielen Dank !

rudi123

@oliverio

Hallo ich hätte da nochmal eine Frage, erstmal danke für die Hilfe ich habe es tatsächlich geschafft es auf einen anderen Button anzuwenden.

Wie könnte ich das Script erweitern bzw. ein zusätzliches hinzufügen das nach 3 Sekunden der Button wieder zurück auf Off geht

<p class="btn-switch">					
 <input type="radio" id="yes" value="0" name="station" class="btn-switch__radio btn-switch__radio_yes" />
 <input type="radio" value="55" checked id="no" name="station" class="btn-switch__radio btn-switch__radio_no" />		
 <label for="yes" class="btn-switch__label btn-switch__label_yes"><span class="btn-switch__txt">ON</span></label>								  <label for="no" class="btn-switch__label btn-switch__label_no"><span class="btn-switch__txt">OFF</span></label>							
</p>

<style>

html {
 text-align: center;
 font-family: Georgia, "Times New Roman", serif;
}
.btn-switch {
 font-size: 6em;
   position: relative;
   display: inline-block;		
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
}
.btn-switch__radio {
   display: none;
}
.btn-switch__label {
   display: inline-block;	
   padding: .75em .5em .75em .75em;
   vertical-align: top;
   font-size: 1em;
   font-weight: 700;
   line-height: 1.5;
   color: #666;
 cursor: pointer;
   transition: color .2s ease-in-out;
}
.btn-switch__label + .btn-switch__label {
 padding-right: .75em;
   padding-left: 0;
}
.btn-switch__txt {
   position: relative;
   z-index: 2;
 display: inline-block;
  min-width: 1.5em;
   opacity: 1;
   pointer-events: none;
   transition: opacity .2s ease-in-out;
}
.btn-switch__radio_no:checked ~ .btn-switch__label_yes .btn-switch__txt,
.btn-switch__radio_yes:checked ~ .btn-switch__label_no .btn-switch__txt {
   opacity: 0;
}
.btn-switch__label:before {
   content: "";
   position: absolute;
   z-index: -1;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   background: #f0f0f0;
   border-radius: 1.5em;
   box-shadow: inset 0 .0715em .3572em rgba(43,43,43,.05);
   transition: background .2s ease-in-out;
}
.btn-switch__radio_yes:checked ~ .btn-switch__label:before {
   background: #6ad500;
}
.btn-switch__label_no:after {
   content: "";
   position: absolute;
   z-index: 2;
   top: .5em;
   bottom: .5em;
   left: .5em;
   width: 2em;
   background: #fff;
   border-radius: 1em;	
   pointer-events: none;
   box-shadow: 0 .1429em .2143em rgba(43,43,43,.2), 0 .3572em .3572em rgba(43,43,43,.1);
   transition: left .2s ease-in-out, background .2s ease-in-out;
}
.btn-switch__radio_yes:checked ~ .btn-switch__label_no:after {
   left: calc(100% - 2.5em);
   background: #fff;
}
.btn-switch__radio_no:checked ~ .btn-switch__label_yes:before,
.btn-switch__radio_yes:checked ~ .btn-switch__label_no:before {
   z-index: 1;
}
.btn-switch__radio_yes:checked ~ .btn-switch__label_yes {
   color: #fff;
}

Mein Button, nutze das Script umgeändert wie es war.

rudi123

@oliverio

Jetzt kommt was an meinem Test Datenpunkt, vielen dank nun habe ich ein Grundgerüst wo ich dran rum basteln kann.

Allerdings nur wenn ich es in ein html widget packe, aber das ist ja kein Problem.

rudi123

@oliverio

Danke werde mir das mal angucken, glaube aber das wird mit meinen Kenntnissen sehr schwierig

Edit:

das Script kommt in die Vis in die Script Spalte?

wenn ich einen Datenpunkt einsetzen möchte wo etwas reingeschrieben wird ist es so falsch denke ich ?

<script>
var adapter = "0_userdata.0.test";
function setzeWert(variablenName, Wert){
   this.servConn._socket.emit('setState', variablenName, Wert);
}
$("input[name=station]").change(function(){
    var station=this.value;
    var playername = $("input[name=squeeze]:checked").val();
    setzeWert(adapter+"Players"+"."+playername+".cmdPlayFavorite",station);
});
</script>

habe jetzt nur bei Adapter meinen Test Datenpunkt eingebunden.

Ich wusste nichtmal das man die CSS Spalte auch direkt ins HTML einbinden kann mit <style> das hilft mir auch ein bischen mehr Ordnung rein zu bekommen.

rudi123

@paul53

Ja allerdings versuche ich externe komplette CSS Buttons zu integrieren, oder kann ich in diesem Widget HTML und CSS soweit verändern das der externe Code passen würde?

rudi123

Guten Tag,

ich habe mal eine Frage ich habe im Internet insbesondere auf codepen.io eine Menge cooler css Buttons Hintergründe usw. gefunden.
Standard On/Off Buttons sind mit dem Html Button Widget auch kein Problem.

Jetzt gibt es aber auch z.B. Radiobutton die 3-4 Buttons in einem vereinen (Drückt man einen wird dieser Aktiviert und der vorige wieder Deaktiviert.

So jetzt meine Frage kann man die einzelnen Buttons an einen Datenpunkt hängen? z.B. erster Button setzt 1 in Datenpunkt zweiter 2 usw. ?

Wenn ja wie müsste man da ran gehen? Müsste man das im HTML Widget irgendwie integrieren? oder im CSS Bereich oder evtl. in der Skript Spalte?

Denkt ihr das ist in Vis überhaupt realisierbar?

Hier ein Beispiel der Radio Buttons: https://codepen.io/caseycallow/pen/yaGQMo

Diese Funktionieren von der Animation her auch Wunderbar in der Vis mit z.B. dem Basic HTML Widget und den CSS Bereich in Standart CSS konvertieren und dann in die CSS Spalte in Vis packen.

Sieht in dem Beispiel dann so aus:

Danke für eure Antworten und Bemühungen.

rudi123

@glasfaser

Perfect da ist es, Danke !

rudi123

@crunchip

leider nein, finde dort zumindest nicht die css spalte

rudi123

Hallo , habe gerade ein paar css html switches die man so im Internet Findet ausprobiert.

Sehen teilweise echt gut aus.

Aber jetzt habe ich ein CSS genutzt und kann meine Vis nicht mehr bearbeiten, ich komme nicht mehr in den CSS Reiter um den letzten Teil zu löschen...

Gibt es eine Möglichkeit die CSS spalte zu deaktivieren oder außerhalb von Vis zu bearbeiten?

Danke für eure Antworten

NEWS

rudi123

@rudi123

Best posts made by rudi123

Latest posts made by rudi123