Ce Forum passera en lecture seule en janvier 2020
Image
Merci de vous rendre sur https://community.jeedom.com maintenant pour vos prochains postes ;)

[tuto] Design - menu slide - corps scroll

Cette partie est réservée à l'utilisation de l'interface web pour smartphone et tablettes
winhex
Actif
Messages : 3775
Inscription : 23 janv. 2015, 01:41

Re: [tuto] Design - menu slide - corps scroll

Message par winhex » 25 août 2018, 23:31

je suppose que tu as résolu sinon pour rester zen :D
(le titre d'un nouveau design pour tablette j'en suis à, quoi, comment, où ... mais j'avais mis ça de côté)

tu backups de partout (j'assume pas)
tu crées un design
tu colles le code en html
tu laisses un peu de place en haut et à gauche (pour pouvoir faire un clic droit) là ou tu as laisser de la place
inutile d’agrandir la tuile
et tu auras un derivé de ça
https://codepen.io/Nephaelin/pen/gxbKQB

Code : Tout sélectionner

<!--
https://codepen.io/Nephaelin/pen/gxbKQB
-->
<style>


.curtain {
    position: relative;
    top:-30px;
  left:0px;
  width: 90vw;
 height: 88vh;
 opacity: 0.8;
    background: -webkit-linear-gradient(top, transparant, white   ); 
    }

</style>

<div>


<canvas class="curtain" id="canvas"></canvas>
</div>

<script>
  // NEPHAELIN BLOOD CELLS
// Title: Microscopic
// Authors: Brandon John-Freso, Ivor Anderson


$(function (canv, particleSize = 20, particleCount = 110, interval = 200, W = window.innerWidth, H = window.innerHeight) {

var W, H, canvas, ctx, particles = [];

    W = W
    H = H
    var canvas = canv;
    canvas.width = W;
    canvas.height = H;
    
canvas = $("#canvas").get(0);
    canvas.width = W;
    canvas.height = H;

ctx = canvas.getContext("2d");
ctx.globalCompositeOperation = "lighter";

    var mouse = {
      x: 0, 
      y: 0,
      rx:0,
      ry:0,
      speed:45,
      delta:0
    };
    
var counter = 0;
            
function randomNorm(mean, stdev) {
                
return Math.abs(Math.round((Math.random()*2-1)+(Math.random()*2-1)+(Math.random()*2-1))*stdev)+mean;
}


function Particle() {
//---------------------- PARTICLE COLORS 360 40
this.h=parseInt(385,10);
this.s=parseInt(55 * Math.random() + 50,10);
this.l=parseInt(25 * Math.random() + 50,10);
this.a=0.5*Math.random();
                
this.color = "hsla("+ this.h +","+ this.s +"%,"+ this.l +"%,"+(this.a)+")";
this.shadowcolor = "hsla("+ this.h +","+ this.s +"%,"+ this.l + "%," + parseFloat(this.a-0.55)+")";
//--------------------------------------                

this.x = Math.random() * W;
this.y = Math.random() * H;
this.direction = {
     "x": -1 + Math.random() * 2,
     "y": -1 + Math.random() * 2
};

this.radius=randomNorm(0,particleSize);
this.scale=0.8*Math.random()+0.5;
this.rotation=Math.PI/4*Math.random();
      
this.grad=ctx.createRadialGradient( this.x, this.y, this.radius, this.x, this.y, 0 );

  this.grad.addColorStop(0,this.color);
  this.grad.addColorStop(1,this.shadowcolor);
      
  this.vx = (2 * Math.random() + 4)*.01*this.radius;
  this.vy = (2 * Math.random() + 4)*.01*this.radius;
        
this.valpha = 0.01*Math.random()-0.02;
        
this.move = function () {
this.x += this.vx * this.direction.x;
this.y += this.vy * this.direction.y;
this.rotation+=this.valpha;
};

this.changeDirection = function (axis) {
            this.direction[axis] *= -1;
            this.valpha *= -1;
        };
        this.draw = function () {
            ctx.save();
            ctx.translate(this.x+mouse.rx/-20*this.radius,this.y+mouse.ry/-20*this.radius);  
          ctx.rotate(this.rotation);  
          ctx.scale(1,this.scale);
            
            this.grad=ctx.createRadialGradient( 0, 0, this.radius, 0, 0, 0 );
            this.grad.addColorStop(1,this.color);
            this.grad.addColorStop(0,this.shadowcolor);
            ctx.beginPath();
            ctx.fillStyle = this.grad;
            ctx.arc(0, 0, this.radius, 0, Math.PI * 2, false);
            ctx.fill();
            ctx.restore();

            
        };
this.boundaryCheck = function () {
            if (this.x >= W*1.2) {
                this.x = W*1.2;
                this.changeDirection("x");
            } else if (this.x <= -W*0.2) {
                this.x = -W*0.2;
                this.changeDirection("x");
            }
            if (this.y >= H*1.2) {
                this.y = H*1.2;
                this.changeDirection("y");
            } else if (this.y <= -H*0.2) {
                this.y = -H*0.2;
                this.changeDirection("y");
            }
        };
    } //end particle class

    function clearCanvas() {
        ctx.clearRect(0, 0, W, H);
    } //end clear canvas

    function createParticles() {
        for (var i = particleCount - 1; i >= 0; i--) {
            p = new Particle();
            particles.push(p);
        }
    } // end createParticles

    function drawParticles() {
        for (var i = particleCount - 1; i >= 0; i--) {
            p = particles[i];
            p.draw();
        }

      
    } //end drawParticles

    function updateParticles() {
        for (var i = particles.length - 1; i >= 0; i--) {
            p = particles[i];
            p.move();
            p.boundaryCheck();

        }
    } //end updateParticles

    function initParticleSystem() {
        createParticles();
        drawParticles();
    }

    function animateParticles() {
        clearCanvas();
        setDelta();
        update()
        drawParticles();
        updateParticles();
        requestAnimationFrame(animateParticles);
    }
  
    initParticleSystem();
    requestAnimationFrame(animateParticles);
  
    function setDelta() {  
      this.now    =   (new Date()).getTime();  
      mouse.delta  =   (this.now-this.then)/1000;  
      this.then   =   this.now;  
    }
    function update() {  
 
    if(isNaN(mouse.delta) || mouse.delta <= 0) { return; }  
 
    var distX   =   mouse.x - (mouse.rx),  
        distY   =   mouse.y - (mouse.ry);  

    if(distX !== 0 && distY !== 0) {          
 
        mouse.rx -=  ((mouse.rx - mouse.x) / mouse.speed); 
        mouse.ry -=  ((mouse.ry - mouse.y) / mouse.speed); 
         
    }   
  
};  

});
</script>
Pièces jointes
zen.png
zen.png (144.82 Kio) Consulté 1237 fois

scotty92fr
Timide
Messages : 261
Inscription : 07 mars 2017, 20:31

Re: [tuto] Design - menu slide - corps scroll

Message par scotty92fr » 26 août 2018, 10:32

Bonjour, non j’ai pas résolu :( la correction apportée ne suffit pas
Jeedom 4.0.19 DIY RPI3/SSD , Zwave - Rfxcom - ...

Avatar de l’utilisateur
Ma Pomme
Timide
Messages : 182
Inscription : 30 juin 2015, 14:06
Localisation : Bordeaux
Contact :

Re: [tuto] Design - menu slide - corps scroll

Message par Ma Pomme » 26 août 2018, 11:16

Excellent bravo !!
Jeedom sur Nuc, modules Fibaro, EnoCean, Edisio, Fully kiosk, Tasker, Netatmo, IPXV4, Xiaomi, Hue, Google home, Alexa et maintenant Ajax 😊

Didi Taker
Timide
Messages : 13
Inscription : 02 nov. 2017, 09:33

Re: [tuto] Design - menu slide - corps scroll

Message par Didi Taker » 05 sept. 2018, 15:11

Merci beaucoup pour le tuto, c'est génial.
Je suis en train de reconvertir tous mes designs MERCIII !!!!

winhex
Actif
Messages : 3775
Inscription : 23 janv. 2015, 01:41

Re: [tuto] Design - menu slide - corps scroll

Message par winhex » 05 sept. 2018, 15:40

ondblclick = double clic
exemple pour rafraîchir
cela pour être un autre désign selon simple ou double clic

Code : Tout sélectionner

<li class="active"><a ondblclick='window.location.reload(false)' onclick="document.getElementById('iframe_a').src ='/index.php?v=d&p=plan&plan_id=3&fullscreen=1#section1'"><span class="fa maison-home63 fa-2x"></span></a></li>

guims78
Actif
Messages : 504
Inscription : 30 sept. 2017, 13:00

Re: [tuto] Design - menu slide - corps scroll

Message par guims78 » 18 oct. 2018, 21:15

Super partage.
Par contre, je ne vois pas où mettre le 3em code donné avec le Menu.vertical.

scotty92fr
Timide
Messages : 261
Inscription : 07 mars 2017, 20:31

Re: [tuto] Design - menu slide - corps scroll

Message par scotty92fr » 19 oct. 2018, 06:15

J'essaye de mettre en place ce super design qui remplacera tous mes designs précédents une fois les problèmes solutionnés.

J'ai rencontré un problème avec l'iframe qui n'affichait que du vide. ce problème était dû à une propriété, dans la configuration standard du site apache:
dans le fichier /etc/apache2/conf-available/security.conf il y avait :

Code : Tout sélectionner

Header set X-Frame-Options "DENY" 
Une fois ce header enlever, l'iframe s'affiche correctement.

Maintenant, je rencontre un autre problème:

tous les éléments s'affichent correctement et sur PC WINDOWS et OSX cela fonctionne parfaitement.

Mais, sur IOS, (safari, chrome,firefox) aucun équipement ne réagit au «  click » (l'appui avec le doigt) comme si l'interaction était désactivée.

Est-ce qu'un spécialiste IOS pourrait aider à résoudre ce problème ?

Merci d'avance
Jeedom 4.0.19 DIY RPI3/SSD , Zwave - Rfxcom - ...

winhex
Actif
Messages : 3775
Inscription : 23 janv. 2015, 01:41

Re: [tuto] Design - menu slide - corps scroll

Message par winhex » 19 oct. 2018, 18:22

appaareamant un soucis onclick
https://stackoverflow.com/questions/147 ... ing-in-ios

si c'est ça dans la même ligne style ajouter "cursor:pointer"

scotty92fr
Timide
Messages : 261
Inscription : 07 mars 2017, 20:31

Re: [tuto] Design - menu slide - corps scroll

Message par scotty92fr » 19 oct. 2018, 18:42

Merci winhex,

J'ai rajouté :

Code : Tout sélectionner

 body {
    cursor: pointer;
  }
  
au style de la zone text "debut.txt" mais ça ne change rien :( mais c'est peut être pas ca qu'il fallait rajouter ?
Jeedom 4.0.19 DIY RPI3/SSD , Zwave - Rfxcom - ...

winhex
Actif
Messages : 3775
Inscription : 23 janv. 2015, 01:41

Re: [tuto] Design - menu slide - corps scroll

Message par winhex » 19 oct. 2018, 18:50

exemple
<!-- Résumés -->
<li class="active"><a onclick="document.getElementById('iframe_a').src ='/index.php?v=d&p=plan&plan_id=3&fullscreen=1#section1'" style="cursor: pointer;"><span class="fa fa-table fa-2x"></span></a></li>

scotty92fr
Timide
Messages : 261
Inscription : 07 mars 2017, 20:31

Re: [tuto] Design - menu slide - corps scroll

Message par scotty92fr » 19 oct. 2018, 19:20

ok, j'ai modifié tous les menus en consequence, mais cela ne change rien.
Jeedom 4.0.19 DIY RPI3/SSD , Zwave - Rfxcom - ...

wojc
Timide
Messages : 27
Inscription : 05 août 2018, 13:46

Re: [tuto] Design - menu slide - corps scroll

Message par wojc » 20 oct. 2018, 17:19

Bonjour à tous.
Super tuto winhex.
J'ai juste une question : comment fait on pour mettre ses propres boutons images dans la barre de menu verticale?
Merci.

scotty92fr
Timide
Messages : 261
Inscription : 07 mars 2017, 20:31

Re: [tuto] Design - menu slide - corps scroll

Message par scotty92fr » 20 oct. 2018, 18:37

En Analysant le problème sur Iphone plus profondément, la première page est réactive, quand on touche une commande, elle s'execute.

par contre les pages suivante ne réagissent pas quand on touche une commande.

je bloque mes 2 neurones !!

Edit: sur un iPad le problème est le même.

En mettant l'adresse du forum sur le dernier menu, la page réagit correctement sur le menu par exemple
Jeedom 4.0.19 DIY RPI3/SSD , Zwave - Rfxcom - ...

winhex
Actif
Messages : 3775
Inscription : 23 janv. 2015, 01:41

Re: [tuto] Design - menu slide - corps scroll

Message par winhex » 21 oct. 2018, 01:33

wojc a écrit :
20 oct. 2018, 17:19
Bonjour à tous.
Super tuto winhex.
J'ai juste une question : comment fait on pour mettre ses propres boutons images dans la barre de menu verticale?
Merci.
img remplace span
dans le style la position
et tu as la hauteur et largeur configurable
mais plus une image à un grand format plus tu ralentiras ton acces
tu peux mettre tous type de fichier image

un exemple

Code : Tout sélectionner

<li><a onclick="document.getElementById('iframe_a').src ='/index.php?v=d&p=plan&plan_id=1&fullscreen=1'">
  <img style="position: relative;left:14px;top:-12px;" src="/core/img/logo-jeedom-sans-nom-blanc.svg" height=32 width=32 />
  </a></li>
@scotty92fr
j'ai repiqué cette methode mais il en existe d'autres

exemple minimaliste en java

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" >
<html>
<head>
<title>Xul.fr - Demonstration of CSS Tab Panel</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<style>
/*
 CSS Document
 (c) By Xul.fr
 Freeware
*/
#content
{
    margin-left:24px;
    margin-right:24px;
}

#tabs ul
{
    font: normal 14px arial, sans, sans-serif;
    -list-style-type: none;
    border-bottom: 1px solid gray;
    margin: 0;
    padding-left:0;
    padding-right:0;
    padding-bottom: 26px;
}

#tabs ul li 
{
    display: inline;
    float: left;
    height: 24px;
    min-width:80px;
    text-align:center;
    padding:0;
    margin: 1px 0px 0px 0px;
    border: 1px solid gray;
}

#tabs ul li.selected 
{
    border-bottom: 1px solid #fff;
    background-color: #fff;
}


#tabs ul li a 
{
    float: left;
    color: #666;
    text-decoration: none;
    padding: 4px;
    text-align:center;
    background-color:#eee;
    min-width:80px;
    border-bottom: 1px solid gray;
}

#tabs ul li a.selected
{
    color: #000;
    font-weight:bold;
    background-color: #fff;
    border-bottom: 1px solid #fff;
}

#tabs ul li a:hover
{
    color: #000;
    font-weight:bold;
    background-color: #fff;
}

#container 
{
    background: white;
    border:1px solid gray;
    border-top: none;
    height:500px;
    width:100%;
    padding:0;
    margin:0;
    left:0;
    top:0;	
}

iframe
{
    border:none;
    margin:0;
    padding:0;
}


</style>
</head>
<body>
<div id="content">

<div id="tabs">
<ul>
     <li><a href="#" rel="/index.php?v=d&p=plan&plan_id=2&fullscreen=1#section1" class="selected"  onclick="loadit(this)">CSS</a></li>
     <li><a href="#" rel="/index.php?v=d&p=plan&plan_id=16&fullscreen=1#section1" onClick="loadit(this)">DOM</a></li>
     <li><a href="#" rel="/index.php?v=d&p=plan&plan_id=3&fullscreen=1#section4" onClick="loadit(this)">JavaScript</a></li>
</ul>
<iframe scrolling="no" id="container"></iframe>
</div>
<script>

  window.onload=startit;
  function loadit( element)
{
	var container = document.getElementById('container');
	container.src=element.rel;

	var tabs=document.getElementById('tabs').getElementsByTagName("a");
	for (var i=0; i < tabs.length; i++)
	{
		if(tabs[i].rel == element.rel) 
			tabs[i].className="selected";
		else
			tabs[i].className="";
	}
}

function startit()
{
	var tabs=document.getElementById('tabs').getElementsByTagName("a");
	var container = document.getElementById('container');
	container.src = tabs[0].rel;
}
/*
    $('#content a').click(function (e) {
  $(this).tab('show');
});
 */
  </script>
    
</div>
  
</body>
</html>
ya en un tas de facons (sauvegarde avant test)
https://codepen.io/wolfcreativo/pen/LZGxow
vidéo à remplacer par liens externe
https://codepen.io/tychoBlender/pen/rejLp

peut être qu'il manque quelque chose
j'ai lu quelques part que iOS aime bien jquery mobile et en design c'est du jquery
je ne crois pas qu'on puisse en changé
mais comme à fait @jared avec flickity
une page créé avec jquery mobile qui pointe sur design ?
après tu as la méthode de @pascal pour tablette que tu peux adapter

j'ai un pote qui tourne sous iOS
avec nos tel on peux changé le mode (version pour ordi) que j'utilise pour accès a certains trucs
Screenshot_20181021-021630_Chrome.jpg
Screenshot_20181021-021630_Chrome.jpg (413.43 Kio) Consulté 930 fois
lui a aussi cette fonction sur tous les nav mais ça ne marche pas. même avec le forum jeedom

wojc
Timide
Messages : 27
Inscription : 05 août 2018, 13:46

Re: [tuto] Design - menu slide - corps scroll

Message par wojc » 21 oct. 2018, 08:31

Merci beaucoup winhex pour la réponse rapide, c'est exactement ce que je voulais.

Avatar de l’utilisateur
tom74
Actif
Messages : 1798
Inscription : 16 juil. 2014, 09:16
Localisation : Annecy (74)

Re: [tuto] Design - menu slide - corps scroll

Message par tom74 » 21 oct. 2018, 09:33

Sympa ce tuto, Merci !

scotty92fr
Timide
Messages : 261
Inscription : 07 mars 2017, 20:31

Re: [tuto] Design - menu slide - corps scroll

Message par scotty92fr » 21 oct. 2018, 19:40

merci Winhex,
Dernière édition par scotty92fr le 21 oct. 2018, 19:48, édité 1 fois.
Jeedom 4.0.19 DIY RPI3/SSD , Zwave - Rfxcom - ...

scotty92fr
Timide
Messages : 261
Inscription : 07 mars 2017, 20:31

Re: [tuto] Design - menu slide - corps scroll

Message par scotty92fr » 21 oct. 2018, 19:46

merci Winhex,
L'exemple que tu as préparé comporte le même problème et je n'ai pas réussi a transposer les 2 autres solutions.

Par contre, j'ai réussi à résoudre le problème. il faut rajouter au style de la page "DESIGN Corps Arlequin"

Code : Tout sélectionner

 
 @supports (-webkit-overflow-scrolling: touch) {
	  /* CSS specific to iOS devices */
      html, body {
      height: 100%;
      overflow: hidden;
      -webkit-overflow-scrolling: touch;
	}
Le design s'affiche et fonctionne correctement, tu pourrais peut-être le rajouter dans le fichier debut.txt de ton magnifique Tuto 8-)

Un grand merci pour ton aide.
@+ Scotty92fr
Jeedom 4.0.19 DIY RPI3/SSD , Zwave - Rfxcom - ...

winhex
Actif
Messages : 3775
Inscription : 23 janv. 2015, 01:41

Re: [tuto] Design - menu slide - corps scroll

Message par winhex » 21 oct. 2018, 21:30

ah bien
tu trouves et tu partages.

scotty92fr
Timide
Messages : 261
Inscription : 07 mars 2017, 20:31

Re: [tuto] Design - menu slide - corps scroll

Message par scotty92fr » 21 oct. 2018, 21:33

C’est le principe non ?


Envoyé de mon iPhone en utilisant Tapatalk
Jeedom 4.0.19 DIY RPI3/SSD , Zwave - Rfxcom - ...

Répondre

Revenir vers « Portail web smartphone & tablettes »

Qui est en ligne ?

Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 1 invité