Skip to content
  • Home
  • Recent
  • Tags
  • 0 Unread 0
  • Categories
  • Unreplied
  • Popular
  • GitHub
  • Docu
  • Hilfe
Skins
  • Light
  • Brite
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse
ioBroker Logo

Community Forum

donate donate
  1. ioBroker Community Home
  2. Deutsch
  3. Tester
  4. jarvis v2.2.0 - just another remarkable vis

NEWS

  • Weihnachtsangebot 2025! 🎄
    BluefoxB
    Bluefox
    21
    1
    810

  • UPDATE 31.10.: Amazon Alexa - ioBroker Skill läuft aus ?
    apollon77A
    apollon77
    48
    3
    9.0k

  • Monatsrückblick – September 2025
    BluefoxB
    Bluefox
    13
    1
    2.3k

jarvis v2.2.0 - just another remarkable vis

Scheduled Pinned Locked Moved Tester
jarvismaterialmaterial uimaterialdesignvisvisualisierungvisualization
6.1k Posts 316 Posters 4.2m Views 273 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • M MCU

    @diginix Man holt sich die svg-URLs von iconify und setzt diese mit einer @keyframe-Animation zeitlich aneinander:

    Möchte man die Animation in einer anderen Farbe haben, so ersetzt man bei den 5 url die currentColor durch die Farbe, die man haben möchte: blue :

    fill%3D%22currentColor%22%20fill-rule
    
    ersetzen durch: blue
    
    fill%3D%22blue%22%20fill-rule
    

    .charge{
      color:transparent;
      animation: charging 3s infinite;
    }
    @keyframes charging{
      0% {
        background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2224%22%20height%3D%2224%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%2017%2017%22%3E%3Cpath%20d%3D%22M12.306%201h-1.307V.016H8V1H6.77C5.834%201%205%201.721%205%202.646v11.679C5%2015.249%205.834%2016%206.77%2016h5.536c.936%200%201.694-.751%201.694-1.675V2.646C14%201.721%2013.241%201%2012.306%201zM13%2014c0%20.516-.484%201-1%201H7c-.515%200-1.011-.484-1.011-1V3c0-.514.496-1.051%201.011-1.051h5c.516%200%201%20.536%201%201.051v11z%22%20fill%3D%22currentColor%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E');
      }
      25%{
        background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2224%22%20height%3D%2224%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%2017%2016%22%3E%3Cg%20fill%3D%22currentColor%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M7.062%2013.508c0%20.248.21.451.467.451h3.912c.255%200%20.559-.203.559-.451v-2.407l-4.938%202.056v.351z%22%2F%3E%3Cpath%20d%3D%22M12.252%201H11V.016H8.023V1H6.715c-.936%200-1.694.658-1.694%201.583v11.742c0%20.924.759%201.675%201.694%201.675h5.536c.936%200%201.694-.751%201.694-1.675V2.583C13.946%201.658%2013.188%201%2012.252%201zM13%2014c0%20.516-.484%201-1%201H7c-.515%200-1.064-.484-1.064-1V3c0-.514.55-1.051%201.064-1.051h5c.516%200%201%20.536%201%201.051v11z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
      } 
      50%{
        background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2224%22%20height%3D%2224%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%2017%2016%22%3E%3Cg%20fill%3D%22currentColor%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M7.062%2013.472a.48.48%200%200%200%20.471.487h3.936a.48.48%200%200%200%20.47-.487V8.094l-4.876%202.065v3.313h-.001z%22%2F%3E%3Cpath%20d%3D%22M12.252%201H11V0H8.023v1H6.715c-.936%200-1.694.492-1.694%201.417v12.125c0%20.924.759%201.458%201.694%201.458h5.536c.936%200%201.748-.535%201.748-1.458V2.417C14%201.492%2013.188%201%2012.252%201zM13%2014c0%20.516-.484%201-1%201H7c-.515%200-1-.484-1-1V3c0-.514.485-1%201-1h5c.516%200%201%20.485%201%201v11z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
      }
      75%{
        background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2224%22%20height%3D%2224%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%2017%2016%22%3E%3Cg%20fill%3D%22currentColor%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M7%2013.448c0%20.281.272.511.529.511h3.912c.255%200%20.559-.229.559-.511V5.069L7%208.281v5.167z%22%2F%3E%3Cpath%20d%3D%22M12.252%201H11V.016H8.023V1H6.715c-.936%200-1.694.575-1.694%201.5v11.825c0%20.924.759%201.675%201.694%201.675h5.536c.936%200%201.694-.751%201.694-1.675V2.5c.001-.925-.757-1.5-1.693-1.5zM13%2014c0%20.516-.484%201-1%201H7c-.515%200-1-.484-1-1V3c0-.514.485-1.051%201-1.051h5c.516%200%201%20.536%201%201.051v11z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
      }
      100% {
        background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2224%22%20height%3D%2224%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cg%20fill%3D%22currentColor%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M10.446%203H6.534C6.279%203%206%203.301%206%203.58v9.902c0%20.273.278.497.535.497h3.912c.254%200%20.553-.224.553-.497V3.58c0-.279-.297-.58-.554-.58z%22%2F%3E%3Cpath%20d%3D%22M11.306%201.021H9.999V.005H7v1.016H5.77c-.936%200-1.694.766-1.694%201.709v11.562c0%20.942.759%201.709%201.694%201.709h5.536c.936%200%201.694-.767%201.694-1.709V2.73c0-.944-.759-1.709-1.694-1.709zM12%2014c0%20.525-.494%201-1%201H6c-.506%200-1.011-.475-1.011-1V3c0-.523.505-1%201.011-1h5c.506%200%201%20.476%201%201v11z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
    }
    
    }
    

    css-charging-black-svg.gif

    css-charging-blue-svg.gif

    Anderes Beispiel:

    .charge{
      color:transparent;
      animation: charging 3s infinite;
    }
    @keyframes charging{
      0% {
        background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2224%22%20height%3D%2224%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cg%20fill%3D%22%23CFD8DC%22%3E%3Cpath%20d%3D%22M34%2044H14c-1.1%200-2-.9-2-2V8c0-1.1.9-2%202-2h20c1.1%200%202%20.9%202%202v34c0%201.1-.9%202-2%202z%22%2F%3E%3Cpath%20d%3D%22M28%2013h-8c-.6%200-1-.4-1-1V5c0-.6.4-1%201-1h8c.6%200%201%20.4%201%201v7c0%20.6-.4%201-1%201z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
      }
      25%{
        background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2224%22%20height%3D%2224%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cg%20fill%3D%22%23CFD8DC%22%3E%3Cpath%20d%3D%22M34%2044H14c-1.1%200-2-.9-2-2V8c0-1.1.9-2%202-2h20c1.1%200%202%20.9%202%202v34c0%201.1-.9%202-2%202z%22%2F%3E%3Cpath%20d%3D%22M28%2013h-8c-.6%200-1-.4-1-1V5c0-.6.4-1%201-1h8c.6%200%201%20.4%201%201v7c0%20.6-.4%201-1%201z%22%2F%3E%3C%2Fg%3E%3Cpath%20fill%3D%22%238BC34A%22%20d%3D%22M34%2044H14c-1.1%200-2-.9-2-2v-9h24v9c0%201.1-.9%202-2%202z%22%2F%3E%3C%2Fsvg%3E');
      } 
      50%{
        background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2224%22%20height%3D%2224%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cg%20fill%3D%22%23CFD8DC%22%3E%3Cpath%20d%3D%22M34%2044H14c-1.1%200-2-.9-2-2V8c0-1.1.9-2%202-2h20c1.1%200%202%20.9%202%202v34c0%201.1-.9%202-2%202z%22%2F%3E%3Cpath%20d%3D%22M28%2013h-8c-.6%200-1-.4-1-1V5c0-.6.4-1%201-1h8c.6%200%201%20.4%201%201v7c0%20.6-.4%201-1%201z%22%2F%3E%3C%2Fg%3E%3Cpath%20fill%3D%22%238BC34A%22%20d%3D%22M34%2044H14c-1.1%200-2-.9-2-2V23h24v19c0%201.1-.9%202-2%202z%22%2F%3E%3C%2Fsvg%3E');
      }
      75%{
        background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2224%22%20height%3D%2224%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cg%20fill%3D%22%23CFD8DC%22%3E%3Cpath%20d%3D%22M34%2044H14c-1.1%200-2-.9-2-2V8c0-1.1.9-2%202-2h20c1.1%200%202%20.9%202%202v34c0%201.1-.9%202-2%202z%22%2F%3E%3Cpath%20d%3D%22M28%2013h-8c-.6%200-1-.4-1-1V5c0-.6.4-1%201-1h8c.6%200%201%20.4%201%201v7c0%20.6-.4%201-1%201z%22%2F%3E%3C%2Fg%3E%3Cpath%20fill%3D%22%238BC34A%22%20d%3D%22M34%2044H14c-1.1%200-2-.9-2-2V13h24v29c0%201.1-.9%202-2%202z%22%2F%3E%3C%2Fsvg%3E');
      }
      100% {
        background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2224%22%20height%3D%2224%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cg%20fill%3D%22%238BC34A%22%3E%3Cpath%20d%3D%22M34%2044H14c-1.1%200-2-.9-2-2V8c0-1.1.9-2%202-2h20c1.1%200%202%20.9%202%202v34c0%201.1-.9%202-2%202z%22%2F%3E%3Cpath%20d%3D%22M28%2013h-8c-.6%200-1-.4-1-1V5c0-.6.4-1%201-1h8c.6%200%201%20.4%201%201v7c0%20.6-.4%201-1%201z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
    }
     
    }
    

    css-charging-greenOther-svg.gif

    Oder der "running Man"

    .run{
      color:transparent;
      animation: running 3s infinite;
    }
    @keyframes running{
      0% {
        background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2224%22%20height%3D%2224%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M13.5%205.5c1.1%200%202-.9%202-2s-.9-2-2-2s-2%20.9-2%202s.9%202%202%202zM9.8%208.9L7%2023h2.1l1.8-8l2.1%202v6h2v-7.5l-2.1-2l.6-3C14.8%2012%2016.8%2013%2019%2013v-2c-1.9%200-3.5-1-4.3-2.4l-1-1.6c-.4-.6-1-1-1.7-1c-.3%200-.5.1-.8.1L6%208.3V13h2V9.6l1.8-.7%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E');
      }
      25%{
        background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2224%22%20height%3D%2224%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M13.49%205.48c1.1%200%202-.9%202-2s-.9-2-2-2s-2%20.9-2%202s.9%202%202%202zm-3.6%2013.9l1-4.4l2.1%202v6h2v-7.5l-2.1-2l.6-3c1.3%201.5%203.3%202.5%205.5%202.5v-2c-1.9%200-3.5-1-4.3-2.4l-1-1.6c-.4-.6-1-1-1.7-1c-.3%200-.5.1-.8.1l-5.2%202.2v4.7h2v-3.4l1.8-.7l-1.6%208.1l-4.9-1l-.4%202l7%201.4z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E');
      } 
      50%{
        background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2224%22%20height%3D%2224%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M13.5%205.5c1.1%200%202-.9%202-2s-.9-2-2-2s-2%20.9-2%202s.9%202%202%202zM9.8%208.9L7%2023h2.1l1.8-8l2.1%202v6h2v-7.5l-2.1-2l.6-3C14.8%2012%2016.8%2013%2019%2013v-2c-1.9%200-3.5-1-4.3-2.4l-1-1.6c-.4-.6-1-1-1.7-1c-.3%200-.5.1-.8.1L6%208.3V13h2V9.6l1.8-.7%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E');
      }
      75%{
        background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2224%22%20height%3D%2224%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M13.49%205.48c1.1%200%202-.9%202-2s-.9-2-2-2s-2%20.9-2%202s.9%202%202%202zm-3.6%2013.9l1-4.4l2.1%202v6h2v-7.5l-2.1-2l.6-3c1.3%201.5%203.3%202.5%205.5%202.5v-2c-1.9%200-3.5-1-4.3-2.4l-1-1.6c-.4-.6-1-1-1.7-1c-.3%200-.5.1-.8.1l-5.2%202.2v4.7h2v-3.4l1.8-.7l-1.6%208.1l-4.9-1l-.4%202l7%201.4z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E');
      }
      100% {
        background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2224%22%20height%3D%2224%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M13.5%205.5c1.1%200%202-.9%202-2s-.9-2-2-2s-2%20.9-2%202s.9%202%202%202zM9.8%208.9L7%2023h2.1l1.8-8l2.1%202v6h2v-7.5l-2.1-2l.6-3C14.8%2012%2016.8%2013%2019%2013v-2c-1.9%200-3.5-1-4.3-2.4l-1-1.6c-.4-.6-1-1-1.7-1c-.3%200-.5.1-.8.1L6%208.3V13h2V9.6l1.8-.7%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E');
       }
     
    }
    
    

    css-charging-black-svg-runningMan.gif

    Drehende Uhr

    .clockrunning{
      color:transparent;
      animation: turning 7s infinite;
    }
    
    @keyframes turning{
      0% {
        background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2224%22%20height%3D%2224%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%201537%201537%22%3E%3Cpath%20d%3D%22M0%20770q0-209%20103.5-386.5T384%20103T769%200q156%200%20298%2061t245%20164t164%20245.5t61%20299.5q0%20156-61%20298.5t-164%20245t-245%20163t-298%2060.5q-157%200-299.5-61T224%201312T60.5%201067.5T0%20770zm169%200q0%20243%20177%20422q177%20177%20423%20177q162%200%20300-80.5t219-218.5t81-300t-81-300.5t-219-219T769%20170t-300%2080.5t-219%20219T169%20770zm541%200q0%2023%2016.5%2040t40.5%2017q23%200%2040-17t17-40V315q0-24-17-40.5T767%20258q-24%200-40.5%2016.5T710%20315v455z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E');
      }
      9%{
        background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2224%22%20height%3D%2224%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%201537%201537%22%3E%3Cpath%20d%3D%22M0%20770q0-209%20103.5-386.5T384%20103T769%200q156%200%20298%2061t245%20164t164%20245.5t61%20299.5q0%20156-61%20298.5t-164%20245t-245%20163t-298%2060.5q-157%200-299.5-61T224%201312T60.5%201067.5T0%20770zm169%200q0%20243%20177%20422q177%20177%20423%20177q162%200%20300-80.5t219-218.5t81-300t-81-300.5t-219-219T769%20170t-300%2080.5t-219%20219T169%20770zm541%200V315q0-24%2016.5-40.5T767%20258q23%200%2040%2016.5t17%2040.5v241l51-89q12-20%2035.5-26t43.5%206q20%2011%2026.5%2034t-5.5%2043L819%20791q-13%2036-52%2036q-24%200-40.5-16.5T710%20770z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E');
      } 
      18%{
        background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2224%22%20height%3D%2224%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%201537%201537%22%3E%3Cpath%20d%3D%22M0%20770q0-209%20103.5-386.5T384%20103T769%200q156%200%20298%2061t245%20164t164%20245.5t61%20299.5q0%20156-61%20298.5t-164%20245t-245%20163t-298%2060.5q-157%200-299.5-61T224%201312T60.5%201067.5T0%20770zm169%200q0%20243%20177%20422q177%20177%20423%20177q162%200%20300-80.5t219-218.5t81-300t-81-300.5t-219-219T769%20170t-300%2080.5t-219%20219T169%20770zm541%200V315q0-24%2016.5-40.5T767%20258t40.5%2016.5T824%20315v356l190-107q20-12%2043-6t34%2028q12%2020%205.5%2043t-26.5%2035L805%20812q-17%2015-38%2015q-24%200-40.5-16.5T710%20770z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E');
      }
      27%{
        background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2224%22%20height%3D%2224%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%201537%201537%22%3E%3Cpath%20d%3D%22M0%20770q0-209%20103.5-386.5T384%20103T769%200q156%200%20298%2061t245%20164t164%20245.5t61%20299.5q0%20156-61%20298.5t-164%20245t-245%20163t-298%2060.5q-157%200-299.5-61T224%201312T60.5%201067.5T0%20770zm169%200q0%20243%20177%20422q177%20177%20423%20177q162%200%20300-80.5t219-218.5t81-300t-81-300.5t-219-219T769%20170t-300%2080.5t-219%20219T169%20770zm541%200V315q0-24%2016.5-40.5T767%20258t40.5%2016.5T824%20315v397h258q24%200%2040.5%2016.5T1139%20769q0%2023-16.5%2040t-40.5%2017H779q-3%201-12%201q-24%200-40.5-16.5T710%20770z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E');
      }
      36%{
        background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2224%22%20height%3D%2224%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%201537%201537%22%3E%3Cpath%20d%3D%22M0%20770q0-209%20103.5-386.5T384%20103T769%200q156%200%20298%2061t245%20164t164%20245.5t61%20299.5q0%20156-61%20298.5t-164%20245t-245%20163t-298%2060.5q-157%200-299.5-61T224%201312T60.5%201067.5T0%20770zm169%200q0%20243%20177%20422q177%20177%20423%20177q162%200%20300-80.5t219-218.5t81-300t-81-300.5t-219-219T769%20170t-300%2080.5t-219%20219T169%20770zm541%200V315q0-24%2016.5-40.5T767%20258t40.5%2016.5T824%20315v420l245%20143q20%2012%2026%2034.5t-6%2042.5q-16%2029-49%2029q-17%200-29-8L750%20824q-17-5-28.5-20T710%20770z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E');
      }
      45%{
        background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2224%22%20height%3D%2224%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%201537%201537%22%3E%3Cpath%20d%3D%22M0%20770q0-209%20103.5-386.5T384%20103T769%200q156%200%20298%2061t245%20164t164%20245.5t61%20299.5q0%20156-61%20298.5t-164%20245t-245%20163t-298%2060.5q-157%200-299.5-61T224%201312T60.5%201067.5T0%20770zm169%200q0%20243%20177%20422q177%20177%20423%20177q162%200%20300-80.5t219-218.5t81-300t-81-300.5t-219-219T769%20170t-300%2080.5t-219%20219T169%20770zm541%200V315q0-24%2016.5-40.5T767%20258t40.5%2016.5T824%20315v438l147%20262q12%2022%205.5%2044.5T950%201094q-11%206-28%206q-34%200-50-28L722%20806q-12-15-12-36z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E');
      }
      54% {
        background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2224%22%20height%3D%2224%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%201537%201537%22%3E%3Cpath%20d%3D%22M0%20770q0-209%20103.5-386.5T384%20103T769%200q156%200%20298%2061t245%20164t164%20245.5t61%20299.5q0%20156-61%20298.5t-164%20245t-245%20163t-298%2060.5q-157%200-299.5-61T224%201312T60.5%201067.5T0%20770zm169%200q0%20243%20177%20422q177%20177%20423%20177q162%200%20300-80.5t219-218.5t81-300t-81-300.5t-219-219T769%20170t-300%2080.5t-219%20219T169%20770zm541%20314V315q0-24%2016.5-40.5T767%20258t40.5%2016.5T824%20315v769q0%2024-16.5%2041t-40.5%2017t-40.5-17t-16.5-41z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E');
    }
    63% {
        background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2224%22%20height%3D%2224%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%201537%201537%22%3E%3Cpath%20d%3D%22M0%20770q0-209%20103.5-386.5T384%20103T769%200q156%200%20298%2061t245%20164t164%20245.5t61%20299.5q0%20156-61%20298.5t-164%20245t-245%20163t-298%2060.5q-157%200-299.5-61T224%201312T60.5%201067.5T0%20770zm169%200q0%20243%20177%20422q177%20177%20423%20177q162%200%20300-80.5t219-218.5t81-300t-81-300.5t-219-219T769%20170t-300%2080.5t-219%20219T169%20770zm387.5%20289.5Q550%201037%20562%201015l148-262V315q0-24%2016.5-40.5T767%20258t40.5%2016.5T824%20315v455q0%2020-13%2036l-149%20266q-16%2028-51%2028q-16%200-27-6q-21-12-27.5-34.5z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E');
    }
    72% {
        background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2224%22%20height%3D%2224%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%201537%201537%22%3E%3Cpath%20d%3D%22M0%20770q0-209%20103.5-386.5T384%20103T769%200q156%200%20298%2061t245%20164t164%20245.5t61%20299.5q0%20156-61%20298.5t-164%20245t-245%20163t-298%2060.5q-157%200-299.5-61T224%201312T60.5%201067.5T0%20770zm169%200q0%20243%20177%20422q177%20177%20423%20177q162%200%20300-80.5t219-218.5t81-300t-81-300.5t-219-219T769%20170t-300%2080.5t-219%20219T169%20770zm270%20142.5q6-22.5%2026-34.5l245-143V315q0-24%2016.5-40.5T767%20258t40.5%2016.5T824%20315v455q0%2019-11.5%2034T784%20824L522%20976q-12%208-28%208q-33%200-49-29q-12-20-6-42.5z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E');
    }
    81% {
        background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2224%22%20height%3D%2224%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%201537%201537%22%3E%3Cpath%20d%3D%22M0%20770q0-209%20103.5-386.5T384%20103T769%200q156%200%20298%2061t245%20164t164%20245.5t61%20299.5q0%20156-61%20298.5t-164%20245t-245%20163t-298%2060.5q-157%200-299.5-61T224%201312T60.5%201067.5T0%20770zm169%200q0%20243%20177%20422q177%20177%20423%20177q162%200%20300-80.5t219-218.5t81-300t-81-300.5t-219-219T769%20170t-300%2080.5t-219%20219T169%20770zm225-1q0-24%2016.5-40.5T451%20712h259V315q0-24%2016.5-40.5T767%20258t40.5%2016.5T824%20315v455q0%2024-16.5%2040.5T767%20827q-10%200-13-1H451q-24%200-40.5-17T394%20769z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E');
    }
    90% {
        background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2224%22%20height%3D%2224%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%201537%201537%22%3E%3Cpath%20d%3D%22M0%20770q0-209%20103.5-386.5T384%20103T769%200q156%200%20298%2061t245%20164t164%20245.5t61%20299.5q0%20156-61%20298.5t-164%20245t-245%20163t-298%2060.5q-157%200-299.5-61T224%201312T60.5%201067.5T0%20770zm169%200q0%20243%20177%20422q177%20177%20423%20177q162%200%20300-80.5t219-218.5t81-300t-81-300.5t-219-219T769%20170t-300%2080.5t-219%20219T169%20770zm268-141q-7-23%205-43q11-20%2034.5-27t43.5%205l190%20107V315q0-24%2016.5-40.5T767%20258t40.5%2016.5T824%20315v455q0%2024-16.5%2040.5T767%20827q-21%200-38-15L464%20664q-20-12-27-35z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E');
    }
    100% {
        background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2224%22%20height%3D%2224%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%201537%201537%22%3E%3Cpath%20d%3D%22M0%20770q0-209%20103.5-386.5T384%20103T769%200q156%200%20298%2061t245%20164t164%20245.5t61%20299.5q0%20156-61%20298.5t-164%20245t-245%20163t-298%2060.5q-157%200-299.5-61T224%201312T60.5%201067.5T0%20770zm169%200q0%20243%20177%20422q177%20177%20423%20177q162%200%20300-80.5t219-218.5t81-300t-81-300.5t-219-219T769%20170t-300%2080.5t-219%20219T169%20770zm384-289q6-23%2026-34q20-12%2043.5-6t34.5%2026l53%2089V315q0-24%2016.5-40.5T767%20258t40.5%2016.5T824%20315v455q0%2024-16.5%2040.5T767%20827q-41%200-54-36L559%20524q-12-20-6-43z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E');
    }
     
    }
    

    css-drehende-Uhr-svg.gif

    Rainbowing Icons

    .rainbowing{
     /*color:transparent;*/
     animation: rainbow 4s infinite;
    }
    
    @keyframes rainbow{
       	100%,0%{
       		color: rgb(255,0,0);
       	}
       	8%{
       		color: rgb(255,127,0);
       	}
       	16%{
       		color: rgb(255,255,0);
       	}
       	25%{
       		color: rgb(127,255,0);
       	}
       	33%{
       		color: rgb(0,255,0);
       	}
       	41%{
       		color: rgb(0,255,127);
       	}
       	50%{
       		color: rgb(0,255,255);
       	}
       	58%{
       		color: rgb(0,127,255);
       	}
       	66%{
       		color: rgb(0,0,255);
       	}
       	75%{
       		color: rgb(127,0,255);
       	}
       	83%{
       		color: rgb(255,0,255);
       	}
       	91%{
       		color: rgb(255,0,127);
       	}
    }
    
    

    css-rainbowing-icon.gif

    Lime Loading Battery

    .charge{
     color:transparent;
     animation: charging 4s infinite;
    }
    @keyframes charging{
     0% {
        background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%221em%22%20height%3D%221em%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M16%2020H8V6h8m.67-2H15V2H9v2H7.33A1.33%201.33%200%200%200%206%205.33v15.34C6%2021.4%206.6%2022%207.33%2022h9.34A1.33%201.33%200%200%200%2018%2020.67V5.33C18%204.6%2017.4%204%2016.67%204z%22%20fill%3D%22lime%22%2F%3E%3C%2Fsvg%3E') no-repeat center center / contain;
        }
     33% {
       background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%221em%22%20height%3D%221em%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M16%2020H8V6h8m.67-2H15V2H9v2H7.33C6.6%204%206%204.6%206%205.33v15.34C6%2021.4%206.6%2022%207.33%2022h9.34c.74%200%201.33-.59%201.33-1.33V5.33C18%204.6%2017.4%204%2016.67%204M15%2016H9v3h6v-3%22%20fill%3D%22lime%22%2F%3E%3C%2Fsvg%3E') no-repeat center center / contain;
     } 
     66%{
       background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%221em%22%20height%3D%221em%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M16%2020H8V6h8m.67-2H15V2H9v2H7.33C6.6%204%206%204.6%206%205.33v15.34C6%2021.4%206.6%2022%207.33%2022h9.34c.74%200%201.33-.59%201.33-1.33V5.33C18%204.6%2017.4%204%2016.67%204M15%2016H9v3h6v-3m0-4.5H9v3h6v-3z%22%20fill%3D%22lime%22%2F%3E%3C%2Fsvg%3E') no-repeat center center / contain;
     }  
     100% {
       background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%221em%22%20height%3D%221em%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M16%2020H8V6h8m.67-2H15V2H9v2H7.33C6.6%204%206%204.6%206%205.33v15.34C6%2021.4%206.6%2022%207.33%2022h9.34c.74%200%201.33-.59%201.33-1.33V5.33C18%204.6%2017.4%204%2016.67%204M15%2016H9v3h6v-3m0-9H9v3h6V7m0%204.5H9v3h6v-3z%22%20fill%3D%22lime%22%2F%3E%3C%2Fsvg%3E') no-repeat center center / contain;
    }
    

    css-batteryLoad-svg-lime.gif

    Red discharge Battery

    .discharge{
     color:transparent;
     animation: discharging 4s infinite;
    }
    
    
    
    @keyframes discharging{
     100% {
        background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%221em%22%20height%3D%221em%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M16%2020H8V6h8m.67-2H15V2H9v2H7.33A1.33%201.33%200%200%200%206%205.33v15.34C6%2021.4%206.6%2022%207.33%2022h9.34A1.33%201.33%200%200%200%2018%2020.67V5.33C18%204.6%2017.4%204%2016.67%204z%22%20fill%3D%22red%22%2F%3E%3C%2Fsvg%3E') no-repeat center center / contain;
        }
     66% {
       background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%221em%22%20height%3D%221em%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M16%2020H8V6h8m.67-2H15V2H9v2H7.33C6.6%204%206%204.6%206%205.33v15.34C6%2021.4%206.6%2022%207.33%2022h9.34c.74%200%201.33-.59%201.33-1.33V5.33C18%204.6%2017.4%204%2016.67%204M15%2016H9v3h6v-3%22%20fill%3D%22red%22%2F%3E%3C%2Fsvg%3E') no-repeat center center / contain;
     } 
     33%{
       background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%221em%22%20height%3D%221em%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M16%2020H8V6h8m.67-2H15V2H9v2H7.33C6.6%204%206%204.6%206%205.33v15.34C6%2021.4%206.6%2022%207.33%2022h9.34c.74%200%201.33-.59%201.33-1.33V5.33C18%204.6%2017.4%204%2016.67%204M15%2016H9v3h6v-3m0-4.5H9v3h6v-3z%22%20fill%3D%22red%22%2F%3E%3C%2Fsvg%3E') no-repeat center center / contain;
     }  
     0% {
       background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%221em%22%20height%3D%221em%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M16%2020H8V6h8m.67-2H15V2H9v2H7.33C6.6%204%206%204.6%206%205.33v15.34C6%2021.4%206.6%2022%207.33%2022h9.34c.74%200%201.33-.59%201.33-1.33V5.33C18%204.6%2017.4%204%2016.67%204M15%2016H9v3h6v-3m0-9H9v3h6V7m0%204.5H9v3h6v-3z%22%20fill%3D%22red%22%2F%3E%3C%2Fsvg%3E') no-repeat center center / contain;
    }
    
    

    css-batterydecharge-svg-red.gif

    DiginixD Offline
    DiginixD Offline
    Diginix
    wrote on last edited by Diginix
    #5220

    @mcu Super geil. Vielen Dank! Funktioniert perfekt.

    Ich würde gern weiterhin die Icons von https://materialdesignicons.com/ nutzen. Aber wenn ich die von dort als SVG downloade und nach base64 codiere sind die immer schwarz. Das geht mir auch so wenn ich von anderen Websites SVG Icons nutzen will. Wie bekommt man die so dass sie sich neutral verhalten und dem Style von Jarvis anpassen?

    ..:: So long! Tom ::..

    NUC7i3 (Ubuntu Proxmox VM) | Echo Dots 2+3. Gen | Xiaomi Sensoren | Mi Robot 1S | Yeelight | Sonoff | Shelly | H801 RGB | Gosund SP1 | NodeMCU+ESP32 | Kostal Plenticore PV+BYD | openWB

    M 1 Reply Last reply
    0
    • M MCU

      @renegade-0 Zeig mal bitte wie es jetzt schon aussieht.
      F12 -Elemente
      0ad52344-b6a0-44b1-b79f-a10f01114a37-image.png
      Falls es auch bei Dir die gleiche Klasse ist, dann

      .jss19{
        background-color:black;
      }
      

      0ebe05f5-5bc2-42da-a829-4787aa5fb2b9-image.png

      Fürs TabPanel:

      .jarvis-TabPanel{
        background-color: black;
      }
      
      R Offline
      R Offline
      Renegade 0
      wrote on last edited by Renegade 0
      #5221

      @mcu
      hat alles funktioniert danke dir. Die jss19 hab ich auch schon gefunden, aber er mag kein Leerzeichen. ;)
      Jetzt schaut es so aus, wie es soll.
      Nun nur noch der Screensaver und die Abschaltung einrichten und Step1 ist endlich fertig. :)

      Wobei kann ich gesammt die Schrift größer stellen?

      M 1 Reply Last reply
      0
      • R Renegade 0

        @mcu
        hat alles funktioniert danke dir. Die jss19 hab ich auch schon gefunden, aber er mag kein Leerzeichen. ;)
        Jetzt schaut es so aus, wie es soll.
        Nun nur noch der Screensaver und die Abschaltung einrichten und Step1 ist endlich fertig. :)

        Wobei kann ich gesammt die Schrift größer stellen?

        M Online
        M Online
        MCU
        wrote on last edited by
        #5222

        @renegade-0 sagte in jarvis v2.2.0 - just another remarkable vis:

        aber er mag kein Leerzeichen

        Wo braucht man ein Leerzeichen?
        Welche Schrift?

        NUC i7 64GB mit Proxmox ---- Jarvis Infos Aktualisierungen der Doku auf Instagram verfolgen -> mcuiobroker Instagram
        Wenn Euch mein Vorschlag geholfen hat, bitte rechts "^" klicken.

        R 1 Reply Last reply
        0
        • DiginixD Diginix

          @mcu Super geil. Vielen Dank! Funktioniert perfekt.

          Ich würde gern weiterhin die Icons von https://materialdesignicons.com/ nutzen. Aber wenn ich die von dort als SVG downloade und nach base64 codiere sind die immer schwarz. Das geht mir auch so wenn ich von anderen Websites SVG Icons nutzen will. Wie bekommt man die so dass sie sich neutral verhalten und dem Style von Jarvis anpassen?

          M Online
          M Online
          MCU
          wrote on last edited by
          #5223

          @diginix
          Jarvis holt die Icons alle von iconify.
          Mich wundert, dass du die Icons von materialdesignicons als SVG runterlädst?
          Wofür? Kannst du mal einen Fall genauer darstellen.

          Warum konvertierst du nach base64?

          Um welche Icon geht es, die es bei iconify nicht gibt?

          NUC i7 64GB mit Proxmox ---- Jarvis Infos Aktualisierungen der Doku auf Instagram verfolgen -> mcuiobroker Instagram
          Wenn Euch mein Vorschlag geholfen hat, bitte rechts "^" klicken.

          DiginixD 1 Reply Last reply
          0
          • M MCU

            @renegade-0 sagte in jarvis v2.2.0 - just another remarkable vis:

            aber er mag kein Leerzeichen

            Wo braucht man ein Leerzeichen?
            Welche Schrift?

            R Offline
            R Offline
            Renegade 0
            wrote on last edited by
            #5224

            @mcu
            Hatte im styles zwischen den einzelnen Argumenten einen Zeilenumbruch. Das passt jetzt.

            Die Schrift in den einzelnen Tabs. Meiner Frau ist das zu klein. :)

            M 1 Reply Last reply
            0
            • R Renegade 0

              @mcu
              Hatte im styles zwischen den einzelnen Argumenten einen Zeilenumbruch. Das passt jetzt.

              Die Schrift in den einzelnen Tabs. Meiner Frau ist das zu klein. :)

              M Online
              M Online
              MCU
              wrote on last edited by
              #5225

              @renegade-0 Die Schrift oben in den TABs?
              a7ef229d-882b-40bb-873e-5a1fd2a0a21a-image.png

              NUC i7 64GB mit Proxmox ---- Jarvis Infos Aktualisierungen der Doku auf Instagram verfolgen -> mcuiobroker Instagram
              Wenn Euch mein Vorschlag geholfen hat, bitte rechts "^" klicken.

              R 1 Reply Last reply
              0
              • M MCU

                @renegade-0 Die Schrift oben in den TABs?
                a7ef229d-882b-40bb-873e-5a1fd2a0a21a-image.png

                R Offline
                R Offline
                Renegade 0
                wrote on last edited by
                #5226

                @mcu
                Sorry nein, meine in den Widgets. also Geräte und dann was so alles darunter ist.

                M 1 Reply Last reply
                0
                • R Renegade 0

                  @mcu
                  Sorry nein, meine in den Widgets. also Geräte und dann was so alles darunter ist.

                  M Online
                  M Online
                  MCU
                  wrote on last edited by
                  #5227

                  @renegade-0
                  Hier?
                  7d2d7853-7eb8-4cc0-94ab-e45d0ef893ae-image.png

                  NUC i7 64GB mit Proxmox ---- Jarvis Infos Aktualisierungen der Doku auf Instagram verfolgen -> mcuiobroker Instagram
                  Wenn Euch mein Vorschlag geholfen hat, bitte rechts "^" klicken.

                  R 1 Reply Last reply
                  0
                  • M MCU

                    @renegade-0
                    Hier?
                    7d2d7853-7eb8-4cc0-94ab-e45d0ef893ae-image.png

                    R Offline
                    R Offline
                    Renegade 0
                    wrote on last edited by
                    #5228

                    @mcu
                    jup genau

                    M 1 Reply Last reply
                    0
                    • R Renegade 0

                      @mcu
                      jup genau

                      M Online
                      M Online
                      MCU
                      wrote on last edited by
                      #5229

                      @renegade-0 https://forum.iobroker.net/topic/30668/jarvis-v2-2-0-just-another-remarkable-vis/4354

                      NUC i7 64GB mit Proxmox ---- Jarvis Infos Aktualisierungen der Doku auf Instagram verfolgen -> mcuiobroker Instagram
                      Wenn Euch mein Vorschlag geholfen hat, bitte rechts "^" klicken.

                      R 1 Reply Last reply
                      0
                      • M MCU

                        @renegade-0 https://forum.iobroker.net/topic/30668/jarvis-v2-2-0-just-another-remarkable-vis/4354

                        R Offline
                        R Offline
                        Renegade 0
                        wrote on last edited by
                        #5230

                        @mcu
                        Perfekt genau das. Und die Überschriften wie Licht?

                        M 1 Reply Last reply
                        0
                        • U Offline
                          U Offline
                          UncleB
                          wrote on last edited by
                          #5231

                          Versuche grade die die Elemente "Switch Action" auf "Button Action" zu ändern, find ich am Tablet einfacher zu bedienen, doch leider passiert nix wenn ich den Button klicke...
                          Übersehe ich was?
                          Screenshot - 2021-10-02T103900.293.png Screenshot - 2021-10-02T104134.662.png

                          1 Reply Last reply
                          0
                          • M Online
                            M Online
                            MCU
                            wrote on last edited by MCU
                            #5232

                            @uncleb ButtonAction schaltet nur einen Wert "true" oder "false", hat aber keinen Toggle-Modus. Der Toggle-Modus kommt erst mit v3. Sehe gerade du bist ja auf v3. Welche Version?

                            NUC i7 64GB mit Proxmox ---- Jarvis Infos Aktualisierungen der Doku auf Instagram verfolgen -> mcuiobroker Instagram
                            Wenn Euch mein Vorschlag geholfen hat, bitte rechts "^" klicken.

                            U 1 Reply Last reply
                            0
                            • R Renegade 0

                              @mcu
                              Perfekt genau das. Und die Überschriften wie Licht?

                              M Online
                              M Online
                              MCU
                              wrote on last edited by MCU
                              #5233

                              @renegade-0

                              .MuiTabs-scroller {
                                  font-size:30px; /* Schrift 14px */
                                  font-weight: bold; /* Fettschrift */
                              }
                              

                              Das passt noch nicht.

                              NUC i7 64GB mit Proxmox ---- Jarvis Infos Aktualisierungen der Doku auf Instagram verfolgen -> mcuiobroker Instagram
                              Wenn Euch mein Vorschlag geholfen hat, bitte rechts "^" klicken.

                              R 1 Reply Last reply
                              0
                              • M MCU

                                @uncleb ButtonAction schaltet nur einen Wert "true" oder "false", hat aber keinen Toggle-Modus. Der Toggle-Modus kommt erst mit v3. Sehe gerade du bist ja auf v3. Welche Version?

                                U Offline
                                U Offline
                                UncleB
                                wrote on last edited by UncleB
                                #5234

                                @mcu said in jarvis v2.2.0 - just another remarkable vis:

                                @uncleb ButtonAction schaltet nur einen Wert "true" oder "false", hat aber keinen Toggle-Modus. Der Toggle-Modus kommt erst mit v3. Sehe gerade du bist ja auf v3. Welche Version?

                                Bin auf V3
                                "true" oder "false" würde ja reichen, aber es passiert nix wenn ich den Button klicke

                                Edit

                                3.0.0-alpha.84

                                U 1 Reply Last reply
                                0
                                • M MCU

                                  @diginix
                                  Jarvis holt die Icons alle von iconify.
                                  Mich wundert, dass du die Icons von materialdesignicons als SVG runterlädst?
                                  Wofür? Kannst du mal einen Fall genauer darstellen.

                                  Warum konvertierst du nach base64?

                                  Um welche Icon geht es, die es bei iconify nicht gibt?

                                  DiginixD Offline
                                  DiginixD Offline
                                  Diginix
                                  wrote on last edited by Diginix
                                  #5235

                                  @mcu sagte in jarvis v2.2.0 - just another remarkable vis:

                                  @diginix
                                  Jarvis holt die Icons alle von iconify.
                                  Mich wundert, dass du die Icons von materialdesignicons als SVG runterlädst?
                                  Wofür? Kannst du mal einen Fall genauer darstellen.

                                  Warum konvertierst du nach base64?

                                  Um welche Icon geht es, die es bei iconify nicht gibt?

                                  Die Quelle habe ich aus der Doku und dort steht auch dass man sie nach base64 codieren soll.
                                  fd269a78-34d4-40ff-b2c6-cf40a6ed7d0d-image.png

                                  Sind die Icons in deinem Bsp ja auch, anders kann man sie ja nicht einfügen. Bei der Ladeanimation würde ich die Standard Icons für battery-low und battery-high nutzen. Aber mir fehlen für bestimmte Geräte noch Icons und die habe ich als SVG lokal auf der Platte. Auch wenn im SVG kein fill color gesetzt ist, wird es als base64 in Jarvis immer schwarz angezeigt. Ich bräuchte also eine Lösung für komplett eigene Icons aus diversen Quellen und für die Ladeanimation hätte ich eben gern die material battery Icons, die Jarvis auch selbst verwendet.
                                  5d34f840-46d1-446b-a26b-c8f48f9e401e-image.png

                                  Bei iconify finde ich das auch: https://icon-sets.iconify.design/mdi/battery-low/
                                  Und nehme dann den CSS Export?

                                  background: url('https://api.iconify.design/mdi/battery-low.svg') no-repeat center center / contain;
                                  

                                  Wenn ich das CSS so baue

                                  @keyframes charging {
                                      0 % {
                                          background: url('https://api.iconify.design/mdi/battery-low.svg') no - repeat center center / contain;
                                      }
                                      50 % {
                                          background: url('https://api.iconify.design/mdi/battery-medium.svg') no - repeat center center / contain;
                                      }
                                      100 % {
                                          background: url('https://api.iconify.design/mdi/battery-high.svg') no - repeat center center / contain;
                                      }
                                  }
                                  

                                  sieht es trotzdem so aus (natürkich animiert):
                                  2693f2db-fc66-48f1-b3f8-291b00006789-image.png

                                  ..:: So long! Tom ::..

                                  NUC7i3 (Ubuntu Proxmox VM) | Echo Dots 2+3. Gen | Xiaomi Sensoren | Mi Robot 1S | Yeelight | Sonoff | Shelly | H801 RGB | Gosund SP1 | NodeMCU+ESP32 | Kostal Plenticore PV+BYD | openWB

                                  M 1 Reply Last reply
                                  0
                                  • DiginixD Diginix

                                    @mcu sagte in jarvis v2.2.0 - just another remarkable vis:

                                    @diginix
                                    Jarvis holt die Icons alle von iconify.
                                    Mich wundert, dass du die Icons von materialdesignicons als SVG runterlädst?
                                    Wofür? Kannst du mal einen Fall genauer darstellen.

                                    Warum konvertierst du nach base64?

                                    Um welche Icon geht es, die es bei iconify nicht gibt?

                                    Die Quelle habe ich aus der Doku und dort steht auch dass man sie nach base64 codieren soll.
                                    fd269a78-34d4-40ff-b2c6-cf40a6ed7d0d-image.png

                                    Sind die Icons in deinem Bsp ja auch, anders kann man sie ja nicht einfügen. Bei der Ladeanimation würde ich die Standard Icons für battery-low und battery-high nutzen. Aber mir fehlen für bestimmte Geräte noch Icons und die habe ich als SVG lokal auf der Platte. Auch wenn im SVG kein fill color gesetzt ist, wird es als base64 in Jarvis immer schwarz angezeigt. Ich bräuchte also eine Lösung für komplett eigene Icons aus diversen Quellen und für die Ladeanimation hätte ich eben gern die material battery Icons, die Jarvis auch selbst verwendet.
                                    5d34f840-46d1-446b-a26b-c8f48f9e401e-image.png

                                    Bei iconify finde ich das auch: https://icon-sets.iconify.design/mdi/battery-low/
                                    Und nehme dann den CSS Export?

                                    background: url('https://api.iconify.design/mdi/battery-low.svg') no-repeat center center / contain;
                                    

                                    Wenn ich das CSS so baue

                                    @keyframes charging {
                                        0 % {
                                            background: url('https://api.iconify.design/mdi/battery-low.svg') no - repeat center center / contain;
                                        }
                                        50 % {
                                            background: url('https://api.iconify.design/mdi/battery-medium.svg') no - repeat center center / contain;
                                        }
                                        100 % {
                                            background: url('https://api.iconify.design/mdi/battery-high.svg') no - repeat center center / contain;
                                        }
                                    }
                                    

                                    sieht es trotzdem so aus (natürkich animiert):
                                    2693f2db-fc66-48f1-b3f8-291b00006789-image.png

                                    M Online
                                    M Online
                                    MCU
                                    wrote on last edited by MCU
                                    #5236

                                    @diginix Dann kannst du Dir ja eine Animation aus den Icons basteln?
                                    4d898327-bbd4-4a54-9270-8170071d61cf-image.png

                                    Und du willst jetzt eine andere Farbe?

                                    NUC i7 64GB mit Proxmox ---- Jarvis Infos Aktualisierungen der Doku auf Instagram verfolgen -> mcuiobroker Instagram
                                    Wenn Euch mein Vorschlag geholfen hat, bitte rechts "^" klicken.

                                    DiginixD 1 Reply Last reply
                                    0
                                    • M MCU

                                      @diginix Dann kannst du Dir ja eine Animation aus den Icons basteln?
                                      4d898327-bbd4-4a54-9270-8170071d61cf-image.png

                                      Und du willst jetzt eine andere Farbe?

                                      DiginixD Offline
                                      DiginixD Offline
                                      Diginix
                                      wrote on last edited by Diginix
                                      #5237

                                      @mcu sagte in jarvis v2.2.0 - just another remarkable vis:

                                      @diginix Dann kannst du Dir ja eine Animation aus den Icons basteln?
                                      4d898327-bbd4-4a54-9270-8170071d61cf-image.png

                                      Und du willst jetzt eine andere Farbe?

                                      Ja, genau das will ich doch auch. Aber die Icons sind eben immer schwarz. Siehe mein editierten Post über deinem.

                                      ..:: So long! Tom ::..

                                      NUC7i3 (Ubuntu Proxmox VM) | Echo Dots 2+3. Gen | Xiaomi Sensoren | Mi Robot 1S | Yeelight | Sonoff | Shelly | H801 RGB | Gosund SP1 | NodeMCU+ESP32 | Kostal Plenticore PV+BYD | openWB

                                      1 Reply Last reply
                                      0
                                      • M MCU

                                        @renegade-0

                                        .MuiTabs-scroller {
                                            font-size:30px; /* Schrift 14px */
                                            font-weight: bold; /* Fettschrift */
                                        }
                                        

                                        Das passt noch nicht.

                                        R Offline
                                        R Offline
                                        Renegade 0
                                        wrote on last edited by
                                        #5238

                                        @mcu
                                        Da rührt sich leider nix.

                                        M 1 Reply Last reply
                                        0
                                        • M Online
                                          M Online
                                          MCU
                                          wrote on last edited by
                                          #5239

                                          @diginix
                                          Nicht diese URL verwenden url('https://api.iconify.design/mdi/battery-high.svg'), sondern

                                          368026e3-60dd-4f93-81aa-70c192117655-image.png
                                          Und dort dann "currentColor" durch var(--meine-Farbe) ersetzen.
                                          Dann kannst mit

                                          :root{
                                            --meine-Farbe: yellow;
                                          }
                                          

                                          es einfacher ändern.

                                          NUC i7 64GB mit Proxmox ---- Jarvis Infos Aktualisierungen der Doku auf Instagram verfolgen -> mcuiobroker Instagram
                                          Wenn Euch mein Vorschlag geholfen hat, bitte rechts "^" klicken.

                                          DiginixD 1 Reply Last reply
                                          0
                                          Reply
                                          • Reply as topic
                                          Log in to reply
                                          • Oldest to Newest
                                          • Newest to Oldest
                                          • Most Votes


                                          Support us

                                          ioBroker
                                          Community Adapters
                                          Donate

                                          816

                                          Online

                                          32.5k

                                          Users

                                          81.6k

                                          Topics

                                          1.3m

                                          Posts
                                          Community
                                          Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen | Einwilligungseinstellungen
                                          ioBroker Community 2014-2025
                                          logo
                                          • Login

                                          • Don't have an account? Register

                                          • Login or register to search.
                                          • First post
                                            Last post
                                          0
                                          • Home
                                          • Recent
                                          • Tags
                                          • Unread 0
                                          • Categories
                                          • Unreplied
                                          • Popular
                                          • GitHub
                                          • Docu
                                          • Hilfe