Forums Tout JavaScript

Les nouveaux forums de Tout JavaScript.com
https://www.toutjavascript.com/forum/

[Résolu] Afficher compteur stocké dans une variable

https://www.toutjavascript.com/forum/viewtopic.php?f=1&t=965

Page 1 sur 2

[Résolu] Afficher compteur stocké dans une variable

Posté : 20 avr. 2020, 16:11
par Sylvain.P
Bonjour,
J'utilise un logiciel (Scenarichain) pour écrire mes cours et dans ce cas plus particulièrement un skin qui permet le défilement automatique sous forme de diaporama.
Je souhaite modifier l’apparence de la page en rajoutant un compte à rebours (pour l'instant l'avancement est visible par une barre de progression).
Il y a donc déjà une variable qui fait office de compteur mais je ne parviens à l'afficher... mes compétences en javascript sont proches de zéro...
Je mets les codes des fichiers qui rentrent en jeu:
Le fichier Root.js :

Code : Tout sélectionner

// Skin-specific Javascript code for the root page.
(function (){
'use strict';

var duration, minDuration, maxDuration, beat, compteur;
duration = 20;
minDuration = 5;
maxDuration = 120;
beat = 120;

var hpsAutomator = scOnLoads[scOnLoads.length] = {
  fPathTools : [ "ide:tplRootPge", "ide:tplRootNav", "ide:tplTools", ],
  fTimout : 1*1000,
  fPlay : false,
  fLoop : false,
  fStrings : [
  /*00*/      "Lancer","Lancer le défilement automatique du diaporama",
  /*02*/      "Arrêter","Arrêter le défilement automatique du diaporama",
  ""],

  /** hpsAutomator.onLoad : Main onLoad function called by the SCENARI framework. */
  onLoad : function() {
    try {
      var i = '<p id="range-tooltip" class="tooltip"><span id="range-value">' + duration +' s</span></p>';
      i += '<input type="range" value="' + duration + '" min="' + minDuration + '" max="' + maxDuration + '" step="1" id="range-slider" name="counter"/>';
      var vRangeCt = this.fRangeCt = scHPS.xAddElt("div", scPaLib.findNode(this.fPathTools[1]),"");
      vRangeCt.id = 'range-container';
      vRangeCt.innerHTML = i;
          
      var vPgBarCt = this.fPgBarCt = scHPS.xAddElt("div", scPaLib.findNode(this.fPathTools[0]),"");
      vPgBarCt.id = 'progress-container';
      vPgBarCt.innerHTML = '<div id="progress-bar" style="width:0%; height:100%; transition:width 1s; transition-timing-function:linear;"></div>';  
      
      var vBtnPlay = this.fBtnPlay = scHPS.xAddElt("a", scPaLib.findNode(this.fPathTools[1]), "btnPlay", this.fPlay);
      vBtnPlay.innerHTML = "<i></i><span>"+this.fStrings[0]+"</span>";
      vBtnPlay.title = this.fStrings[1];
      vBtnPlay.onclick = this.sPlay;
      
      var vBtnPause = this.fBtnPause = scHPS.xAddElt("a", scPaLib.findNode(this.fPathTools[1]), "btnPause", !this.fPlay);
      vBtnPause.innerHTML = "<i></i><span>"+this.fStrings[2]+"</span>";
      vBtnPause.title = this.fStrings[3];
      vBtnPause.onclick = this.sPause;

      hpsAutomator.getRangeValue();
      
      this.fHeartbeat = window.setInterval(function(){hpsAutomator.sHeartbeat()},this.fTimout);
      scPresMgr.register("onAction", this.sOnAction);
    } catch(e){ scCoLib.log("ERROR - hpsAutomator.onLoad : "+e)}
  },
  /** hpsAutomator.sHeartbeat */
  sHeartbeat : function() {
    if (hpsAutomator.fPlay){
        hpsAutomator.fBtnPlay.style.display = "none";
        hpsAutomator.fBtnPause.style.display = "";
        beat++;
        if (beat >= duration){
            beat = 0;
            if (scPresMgr.hasNext()) scPresMgr.next();
                else hpsAutomator.sPause();                    
            }
            hpsAutomator.moveProgressBar();
        } 
        else {
            hpsAutomator.fBtnPlay.style.display = "";
            hpsAutomator.fBtnPause.style.display = "none";
            }
    },
  /** hpsAutomator.sOnAction */
  sOnAction : function(pAction) {
    if (pAction === "showZoom" && hpsAutomator.fPlay) hpsAutomator.sPause();
  },
  /** hpsAutomator.sPlay */
  sPlay : function() {
    hpsAutomator.fPlay = true;
    hpsAutomator.fBtnPlay.style.display = "none";
    hpsAutomator.fBtnPause.style.display = "";
  },
  /** hpsAutomator.sPause */
  sPause : function() {
    hpsAutomator.fPlay = false;
    hpsAutomator.fBtnPlay.style.display = "";
    hpsAutomator.fBtnPause.style.display = "none";
  },
  /** hpsAutomator.moveProgressBar*/
  moveProgressBar : function() {
      if ( document.getElementById('progress-bar') ) {
          var w = (beat * (100 / (duration-1)));
          document.getElementById('progress-bar').style.width = w + '%';
          if ( w > 0 && w <= 100 ) {
              document.getElementById('progress-bar').style.visibility = 'visible';
          }
          else {
              document.getElementById('progress-bar').style.visibility = 'hidden';
              }
          }
      },
   /** hpsAutomator.getRangeValue*/   
   getRangeValue : function(){
       if ( document.getElementById("range-slider") && document.getElementById("range-value") ){
          var s = document.getElementById("range-slider");
          var o = document.getElementById("range-value");
          o.innerHTML = s.value + ' s';
          duration = s.value;
          s.oninput = function(){
            o.innerHTML = this.value + ' s';
            duration = this.value;
            }
          }
      }, 
  loadSortKey:"Z"

}
}) ();
La variable qui sert de compteur est la variable "beat".
J'ai essayé de m'inspirer de la barre de progression, qui est la partie " moveProgressBar : function()" en utilisant le code "document.getElementById" mais je n'y parviens pas.

Et le code CSS :

Code : Tout sélectionner

/* *********************************************************
	Import slide CSS
*/
@import url("slideSS.css");

/* *********************************************************
	Slideshow root page styles
*/
#tplToc{
	bottom: 20px;
	z-index:100
}
.tplTocOn{
	width: 300px;
}
.tplTocOff{
	width: 0;
}
#tplTocCo{
	display: flex;
	flex-flow: column nowrap;
	margin: 1em 0;
}
#tplTocScroll{
	flex: 1 1 auto;
	margin-bottom: 0;
	margin-top: 0;
	order: 2;
	overflow-y: auto;
	position: relative;
}
div.tocSrlUp{
	flex: 0 0 20px;
	order: 1;
	text-align:center;
}
div.tocSrlDwn{
	flex: 0 0 20px;
	order: 3;
	text-align:center;
}
div.tocSrlUp a,
div.tocSrlDwn a{
	display:inline-block;
	padding:0;
	box-sizing: border-box;
	width: 280px;
	height: 20px;
	padding-left: 280px;
	overflow: hidden;
	background: url(../img/tpl/menu-scroller.svg) no-repeat top;
	background-size: 100%;
}

div.tocSrlDwn a.tocSrlDwnBtn{
	background-position: 0px -36px;
}

#tplToc div.btnOff a.tocSrlDwnBtn, #tplToc div.btnOff a.tocSrlUpBtn{
	opacity:0.3;
	cursor:default;
}


a.btnTocTglOn,
a.btnTocTglOff{
	position: absolute;
	top: 15px;
	width:12px;
	height:27px;
	right:-12px;
	background: url("../img/tpl/menu-collapse.svg") no-repeat;
}
a.btnTocTglOn{
	background-position: 0 -30px;
}
a.btnTocTglOn:hover{
	background-position: 0 0;
}
a.btnTocTglOff{
	background-position: 0 -90px;
}
a.btnTocTglOff:hover{
	background-position: 0 -60px;
}
a.btnTocTglOn span,
a.btnTocTglOff span{
	display: none;
}
#tplSldFra{
	bottom: 20px;
}
.tplSldFraTocOn{
	left: 300px;
}
.tplSldFraTocOff{
	left: 0;
}

a.btnModeHtml{
	background-image: url(../img/tools/btnMdeHtml.png);
	opacity:0.2;
	filter:Alpha(opacity=20);
}
a.btnModeHtml:hover{
	opacity:1;
	filter:Alpha(opacity=100);
}
a.btnEfcts,
a.btnNoEfcts{
	position: absolute;
	height : 40px;
	top:0px;
	width:30px;
	right:40px;
	background-repeat: no-repeat;
	background-position: center center;
}
a.btnEfcts{
	background-image: url(../img/tools/btnEfcts.png);
	opacity:0.2;
	filter:Alpha(opacity=20);
}
a.btnEfcts:hover{
	opacity:1;
	filter:Alpha(opacity=100);
}
a.btnNoEfcts{
	background-image: url(../img/tools/btnNoEfcts.png);
	opacity:0.2;
	filter:Alpha(opacity=20);
}
a.btnNoEfcts:hover{
	opacity:1;
	filter:Alpha(opacity=100);
}

a.btnEfcts span,
a.btnNoEfcts span,
a.btnModeHtml span{
	display:none
}

div.ssSlide{
	position: absolute;
	width: 100%;
	background-color: white;
	bottom:25px;
	top:0;
}

h1.slideTi{
	position: absolute;
	width: 100%;
	height: 10%;
	margin:0px;
	text-align: center;
}
iframe.slideFra{
	position: absolute;
	top:0px;
	left:0px;
	width: 100%;
	height: 100%;
	bottom:0px;
	border: 0px;
	overflow: hidden;
}

#tplZoomFra{
	position: absolute;
	width:100%;
	height:100%;
	overflow:hidden;
	z-index:110
}
div.tplZoomOvr{
	position: absolute;
	width:100%;
	height:100%;
	background-color: #fff;
	opacity:0.5;
}
#tplZoomCo{
	position: absolute;
	left: 5%;
	right: 5%;
	top: 5%;
	bottom: 5%;
}
div.sldZmFrg,
div.sldZmSld{
	position: absolute;
	left: 5px;
	right: 5px;
	top: 5px;
	bottom: 5px;
	overflow: hidden;
	text-align: center;
	background-color: white;
}
div.sldZmSld iframe{
	overflow: auto;

}
a.btnZmCls{
	position: absolute;
	width:30px;
	height:30px;
	top: -30px;
	right: -30px;
	background: url("../img/co/buttons.svg") no-repeat scroll 0px -120px / 100% auto rgba(0, 0, 0, 0);
}
a.btnZmCls span{
	display: none;
}

#tplFootBanner{
	left: 0;
}

.sldWaitMsg{
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left:-150px;
	margin-top:-20px;
	width: 300px;
	height: 40px;
	background-color: white;
	border: 6px solid #5B6F94;
	text-align: center;

}
.sldWaitMsg span{
	display:block;
	padding-top:10px;
	font-size:1.2em;
	font-weight:bold;
	font-style: italic;
	color: #5B6F94;
	background:url(../img/co/throbber.gif) 5px 13px no-repeat
}


#accessibility{
	font-size: 60%;
	list-style-type: none;
	padding:0;
	margin:0;
	z-index:200;
	position:absolute;
	top:3px;
}
#accessibility li{
	display:inline-block;
	margin:0 1em;
}
#accessibility a{
	opacity:0;
	color: rgb(78, 188, 225);
	text-decoration: none;
}
#accessibility a span{
	color: rgb(78, 188, 225);
}
#accessibility:hover a{
	opacity:0.5;
}
#accessibility a:focus{
	opacity:1;
}
.tooltip{
	background-color: #e0ecec;
	border:2px solid #434e52;
	font-size: 90%;
}
.tooltip_co{
	padding: 2px 4px;
}
.tooltip_ti{
	background-color: #434e52;
	min-height:20px;
	color:#ffffff;
	text-align:center;
}
.tooltip_x{
	display:inline-block;
	padding:0;
	margin: 0 ;
	position:absolute;
	right:2px;
	top:2px;
	color: #e0ecec;
}
.tooltip_x:hover{
	text-decoration: none;
}
.tooltip_co p{
	margin:0.5em 0;
}
.tooltip_co ul{
	padding-left: 1.5em;
	margin:0;
}

/* *********************************************************
	Menu styles
*/
#toc{
	list-style-image:none;
	list-style-position:outside;
	list-style-type:none;
	margin: 0;
	padding: 0 10px;
	text-align:left;
	cursor: default;
	margin-left:3px
}
#toc a {
	text-decoration: none;
	color: black;
}
#toc a span{
	color: black;
}
#toc a.toc_lnk span{
	padding: 2px 5px 2px 5px;
	display:inline-block;
	cursor:pointer;
	cursor:hand;
}
#toc a img{
	border: 0px;
	vertical-align: middle;
}
#toc ul{
	list-style-image:none;
	list-style-type:none;
	margin: 2px 0px 0px 0px;
	padding: 0px 0px 0px 14px;
}
#toc li{
	margin: 0px 0px 0px 0px;
	padding: 2px 0px 2px 0px;
	background-image: linear-gradient(to right, #434e52 0%,rgba(0,0,0,0) 100%);
	background-size: 100% 1px;
	background-position: bottom;
	background-repeat: no-repeat;
}
#toc ul li{
	background:none;
}

#toc .toc_i{
	color: black;
	padding-left: 15px;
	position: relative;
}
#toc a.toc_tgle_o,
#toc a.toc_tgle_c{
	position:absolute;
	display: inline-block;
	box-sizing: border-box;
	width:20px;
	height:20px;
	left:0;
	top:2px;
	padding-left: 20px;
	overflow: hidden;
	background: url(../img/tpl/menu-toggle.svg) no-repeat top;
	background-size: 18px;
	background-position: 0px 0px;
}
#toc a.toc_tgle_o{
	background-position: 0px -40px;
}
#toc a.toc_lnk {
	padding: 2px 2px 2px 7px;
	display: inline-block;
}
#toc div.toc_sel_yes a.toc_lnk span{
	display: inline-block;
	background-color:#434e52;
	color:white;
	border-radius:5px;
}

/* *********************************************************
	Prog bar styles
*/
.progFra{
	position:absolute;
	bottom: 25px;
	right: 110px;
	left: 140px;
	text-align:center;
	background-color:#999999;
	height:15px
}

.progTocOn{
	left:350px
}

.progCount{
	background-image:linear-gradient(to right, #434e52 90%, #999999);
	background-image:-webkit-linear-gradient(to right, #434e52 90%, #999999);
	background-image:-moz-linear-gradient(to right, #434e52 90%, #999999);
	background-image:-o-linear-gradient(to right, #434e52 90%, #999999);
	background-image:-ms-linear-gradient(to right, #434e52 90%, #999999);
	background-color:#434e52;
	text-align: right;
	overflow: visible;
	left:0px;
	color:#fff;
	position:absolute;
	height:15px;
	padding-right:10px;
	font-size:12px
}

.prog_0 .progCount{
	width:0%
}

.prog_5 .progCount{
	right:95%
}

.prog_10 .progCount{
	right:90%
}

.prog_15 .progCount{
	right:85%
}

.prog_20 .progCount{
	right:80%
}

.prog_25 .progCount{
	right:75%
}

.prog_30 .progCount{
	right:70%
}

.prog_35 .progCount{
	right:65%
}

.prog_40 .progCount{
	right:60%
}

.prog_45 .progCount{
	right:55%
}

.prog_50 .progCount{
	right:50%
}

.prog_55 .progCount{
	right:45%
}

.prog_60 .progCount{
	right:40%
}

.prog_65 .progCount{
	right:35%
}

.prog_70 .progCount{
	right:30%
}

.prog_75 .progCount{
	right:25%
}

.prog_80 .progCount{
	right:20%
}

.prog_85 .progCount{
	right:15%
}

.prog_90 .progCount{
	right:10%
}

.prog_95 .progCount{
	right:5%
}

.prog_100 .progCount{
	right:0px
}


/* *********************************************************
	Content styles
*/
#tplHomeSlide {
	bottom:0;
	background: rgba(0, 0, 0, 0) url("../img/tpl/back-home.svg") no-repeat fixed left center / 100% 100%;
}
#tplHomeSlide .sldHome {
	margin-left: 40%;
}
#tplHomeSlide .sldHome_ti{
	text-align: center;
	margin-top:4em;
	color:#ffffff;
	margin-bottom: 0;
	background-color: rgba(67,78,82,0.7);
}
#tplHomeSlide .sldHome_co{
	color:#ffffff;
}
#tplHomeSlide .sldHome_co .ssBk{
	background-color:transparent;
}
/* ================================================================== *
   Opale CE - Slide Player (autoplay + autoloop)
 * ================================================================== */
 
/* --- HACK: 
 * modify #tplRootNav 
 * adapt a.btnNxt + a.btnPrv
 * add a.btnPlay + a.btnPause
 * --- BEGIN of HACK ------------------------------------------------ */
 
#tplRootNav{
	position: absolute;
	right: 0;
	bottom: 20px;
	height: 60px;
	width: 110px;
}
 
a.btnNxt, a.btnPrv,
a.btnPlay,
a.btnPause {
	position: absolute;
	width:30px;
	height:40px;
	bottom: 0px;
	background: url(../img/nav/buttons.svg) no-repeat 0 0/ 100% auto;
}

a.btnPrv{
  background-position: 0 0px;
  right: 75px;
}

a.btnNxt{
  background-position:0 -40px;
  right: 5px;
}

a.btnPlay,
a.btnPause {
	right: 40px;
}

a.btnPlay{
  background-position: 0 -120px;
  }
  
a.btnPause{
  background-position:0 -160px;
  }
  
a.btnPlay:hover,
a.btnPause:hover{
  cursor:pointer;
  	opacity:0.5;
}
a.btnPlay span,
a.btnPause span{
  display: none;
}

/* --- ADD BY XAAN :
 * #range-slider
 * .tooltip
 * #progress-bar
 * ------------------------------------------------------------------ */

/* --- Range Slider ------------------------------------------------- */
#range-container {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	background: inherit;
	right: 5px;
	height: 12px;
	width: 200px;
	margin: 0;
	padding: 1px;
	top: 5px;
}

#range-slider {
	-webkit-appearance: none;
	background: transparent;
	margin: 0;
	padding: 0;
	width: 100%;
	opacity: 0.7;
	-webkit-transition: .2s;
	transition: opacity .2s;
}

#range-slider:focus {
	outline: none;
}

#range-slider:hover {
	opacity: 1;
}
/* Chromium, Edge */
#range-slider::-webkit-slider-runnable-track {
	width: 100%;
	height: 6px;
	border-radius: 2px;
	border: 1px solid #4a8d8a;
	background: #e0ecec;
}

#range-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	border: 1px solid #e0ecec;
	height: 12px;
	width: 12px;
	border-radius: 50%;
	background: #434e52;
	cursor: pointer;
	margin-top: -4px;
}
/* Firefox */
#range-slider::-moz-range-track {
	width: 100%;
	height: 4px;
	cursor: pointer;
	border-radius: 2px;
	border: 1px solid #4a8d8a;
	background: #e0ecec;
}

#range-slider::-moz-range-thumb {
	height: 10px;
	width: 10px;
	border: 1px solid #e0ecec;
	border-radius: 50%;
	background: #434e52;
	cursor: pointer;
}

#range-slider::-moz-range-progress {
	background: #4a8d8a;
}

#range-slider::-moz-focus-outer {
	border: 0;
}

/* IE */
#range-slider::-ms-track {
	width: 100%;
	height: 4px;
	background: transparent;
	border-color: transparent;
	color: transparent;
	border: 1px solid #4a8d8a;
    border-radius: 2px;
}

#range-slider::-ms-fill-lower {
	background: #eee;
}

#range-slider::-ms-fill-upper {
	background: #ddd;
}

#range-slider::-ms-thumb {
	margin-top: 1px;
	height: 12px;
	width: 12px;
	border: 1px solid #4a8d8a;
	border-radius: 50%;
	background: #434e52;
	cursor: pointer;
}

#range-slider::-ms-tooltip {
	display: none;
}
/* --- Tooltip ------------------------------------------------------ */
.tooltip {
	position: absolute;
	top: -35px;
	left: 35
	%;
	margin: 0;
	padding: 5px;
	width: 40px;
	height: 20px;
	background-color: #333;
	color: #fff;
	line-height: 20px;
	font-size: 0.8em;
	text-align: center;
	border-radius: 4px;
	z-index: 1;
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.3s;
}

.tooltip::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: #333 transparent transparent transparent;
}

#range-container:hover>.tooltip {
	visibility: visible;
	opacity: 1;
}
/* --- Progress Bar ------------------------------------------------- */
#progress-container {
	position: fixed;
	background: transparent;
	top: 0;
	left: 0;
	width: 100%;
	height: 10px;
	z-index: 120;
}

#progress-bar {
	background: #df740c;
	
}

/* --- END of HACK -------------------------------------------------- */
L’idéal serait d'avoir dans un coin de l'écran un cadre avec le compteur.
Voici le rendu final :
capture_diaporama.jpg
capture_diaporama.jpg (31.03 Kio) Vu 14047 fois
Merci d'avance.
Sylvain.

Re: Afficher compteur stocké dans une variable

Posté : 22 avr. 2020, 10:32
par webmaster
Bonjour

Est-ce que vous avez accès à la variable beat avec console.log(beat)

L'idée est ensuite de faire un timer avec setinterval pour afficher beat dans un div
Voir l'exemple de l'horloge ici :
https://www.toutjavascript.com/referenc ... terval.php

Re: Afficher compteur stocké dans une variable

Posté : 22 avr. 2020, 17:47
par Sylvain.P
Bonjour,
Merci pour votre réponse.
J'essaye de voir comment faire !

Edit : Je ne vois pas comment faire...
J'arrive bien à accéder à la variable beat vu qu'avec alert(beat) j'ai bien une pop-up qui s'ouvrir à chaque fois que le compteur incrémente.
Dès que j'essaye de rajouter quelque chose, ça m'enlève toutes les autres fonctions du diaporama (défilement automatique...)
j'ai essayé de créer une fonction compteur comme celle de la barre de progression vu que ça va ensemble, c'est juste une façon différente de l'afficher... :

Code : Tout sélectionner

/** hpsAutomator.rebours*/
	rebours : function() {
		var compt = duration - beat;
		compt.id = 'compteur-container';
		compt.innerHTML = '<div id="compteur" style="width:100%; height:100%;" ></div>';  
		document.getElementById('compteur').innerHTML= compt ;
	}
en prenant cette partie du code en exemple :

Code : Tout sélectionner

var vPgBarCt = this.fPgBarCt = scHPS.xAddElt("div", scPaLib.findNode(this.fPathTools[0]),"");
      vPgBarCt.id = 'progress-container';
      vPgBarCt.innerHTML = '<div id="progress-bar" style="width:0%; height:100%; transition:width 1s; transition-timing-function:linear;"></div>';
et celle ci :

Code : Tout sélectionner

 /** hpsAutomator.moveProgressBar*/
  moveProgressBar : function() {
      if ( document.getElementById('progress-bar') ) {
          var w = (beat * (100 / (duration-1)))
          document.getElementById('progress-bar').style.width = w + '%';
          if ( w > 0 && w <= 100 ) {
              document.getElementById('progress-bar').style.visibility = 'visible';
          }
          else {
              document.getElementById('progress-bar').style.visibility = 'hidden';
              }
          }
      },

Car y a pas de balises "div" classiques dans le fichier.

puis de rajouter : hpsAutomator.rebours() dans la fonction qui fait entrer en jeu la barre de progression;

Code : Tout sélectionner

/** hpsAutomator.sHeartbeat */
  sHeartbeat : function() {
    if (hpsAutomator.fPlay){
        hpsAutomator.fBtnPlay.style.display = "none";
        hpsAutomator.fBtnPause.style.display = "";
        beat++;
		
        if (beat >= duration){
            beat = 0;
            if (scPresMgr.hasNext()) scPresMgr.next();
                else hpsAutomator.sPause();                    
            }
            hpsAutomator.moveProgressBar();
	    hpsAutomator.rebours();  /* <-- ligne ajoutée */
        } 
        else {
            hpsAutomator.fBtnPlay.style.display = "";
            hpsAutomator.fBtnPause.style.display = "none";
            }
    },
Mais rien ne fonctionne.
c'est fou qu'il n'y ait pas un moyen simple d'afficher une variable, du style display(beat)

Re: Afficher compteur stocké dans une variable

Posté : 22 avr. 2020, 18:56
par Sylvain.P
J'ai essayé autre chose qui ne fonctionne toujours pas :

Code : Tout sélectionner

  /** hpsAutomator.sHeartbeat */
  sHeartbeat : function() {
    if (hpsAutomator.fPlay){
        hpsAutomator.fBtnPlay.style.display = "none";
        hpsAutomator.fBtnPause.style.display = "";
        beat++;
        if (beat >= duration){
            beat = 0;
            if (scPresMgr.hasNext()) scPresMgr.next();
                else hpsAutomator.sPause();                    
            }
            hpsAutomator.moveProgressBar();
			var compt = beat ;
			compt.id = 'compteur';
			console.log(compt);
        } 
        else {
            hpsAutomator.fBtnPlay.style.display = "";
            hpsAutomator.fBtnPause.style.display = "none";
j'ai essayé de rajouter

Code : Tout sélectionner

var compt = beat ;
			compt.id = 'compteur';
			console.log(compt);
au moment où le mouvement de la barre de progression rentre en jeu.
Et la même avec un alert(compt) j'ai aucune pop-up qui apparait.

Re: Afficher compteur stocké dans une variable

Posté : 22 avr. 2020, 19:07
par webmaster
Je pense que je comprends le probleme

Il faut que le HTML contienne (avant le lancement du diapo) un div#compteur
<div id="compteur" style="width:100%; height:100%;" ></div>

Ensuite, rebours() s'ecrit simplement avec :

Code : Tout sélectionner

rebours : function() {
	var compt = duration - beat;
	console.log(compt);
	document.getElementById('compteur').innerHTML= compt ;
}
Si rien ne s'affiche, il faut regarder dans la console si "compt" est bien affiché

Re: Afficher compteur stocké dans une variable

Posté : 22 avr. 2020, 21:16
par Sylvain.P
Merci pour votre réponse.
Par contre, et c'est ça le problème, ce n'est pas dans un fichier html.
Le logiciel "scenarichain" permet de générer du contenu en différents supports dont le diaporama.
Ce que j'essaye de modifier est le skin que l'on m'a procuré pour que le diaporama défile tout seul.
Il y a pour le skin, entre autre, un dossier pour le CSS et un autre pour le JS.
Les seuls fichiers qui ont été modifiés pour faire le défilement automatique du diaporama sont les fichiers rootSS.CSS et root.js (ceux que j'ai mis dans le premier post).
Les balises div sont mises bizarrement (du moins pour moi...) dans le root.js et mon problème c'est que je ne sais pas où mettre les lignes rajoutées...
J'avais posé la question sur le forum du logiciel, mais sans réponse....

C'est une question très bête mais comment on regarde dans la console ? (ça montre mon niveau... 😂)

Re: Afficher compteur stocké dans une variable

Posté : 22 avr. 2020, 22:01
par webmaster
Déjà un tuto sur la console
https://www.toutjavascript.com/savoir/n ... script.php

Ensuite, on peut ajouter un div avec du JS
voir ici :
https://www.toutjavascript.com/referenc ... before.php

Re: Afficher compteur stocké dans une variable

Posté : 23 avr. 2020, 15:17
par Sylvain.P
Merci pour le tuto sur la console, j'utilisais l'onglet "éléments" mais je ne connaissais pas l'onglet "console";
Du coup, j'ai réussi à le mettre dans le bloc "progress-bar" qui était déjà fait (voir capture).

Ce que je n’arrive pas à bien comprendre et à appliquer, c’est la façon de mettre un nouveau bloc, afin de mieux pouvoir le personnaliser (pour l'instant je n'ai pas le choix le compteur est coincé en haut à gauche), car le seul endroit dans le fichier où il y en a une c’est celui-ci :

Code : Tout sélectionner

vPgBarCt.innerHTML = '<div id="progress-bar" style="width:0%; height:100%; transition:width 1s; transition-timing-function:linear;"></div>';
Celui dont je me suis servi d'ailleurs...
Dès que j'essaye d'en rajouter un (en essayant de prendre modèle sur celui déjà fait) il n'y a plus rien qui fonctionne...

je remets la dernière version du fichier :

Code : Tout sélectionner

// Skin-specific Javascript code for the root page.
(function (){
'use strict';

var duration, minDuration, maxDuration, beat, compt;
duration = 30;
minDuration = 15;
maxDuration = 120;
beat = 121;


var hpsAutomator = scOnLoads[scOnLoads.length] = {
  fPathTools : [ "ide:tplRootPge", "ide:tplRootNav", "ide:tplTools", ],
  fTimout : 1*1000,
  fPlay : false,
  fLoop : false,
  fStrings : [
  /*00*/      "Lancer","Lancer le défilement automatique du diaporama",
  /*02*/      "Arrêter","Arrêter le défilement automatique du diaporama",
  ""],

  /** hpsAutomator.onLoad : Main onLoad function called by the SCENARI framework. */
  onLoad : function() {
    try {
	  
      var i = '<p id="range-tooltip" class="tooltip"><span id="range-value">' + duration +' s</span></p>';
      i += '<input type="range" value="' + duration + '" min="' + minDuration + '" max="' + maxDuration + '" step="15" id="range-slider" name="counter"/>';
      var vRangeCt = this.fRangeCt = scHPS.xAddElt("div", scPaLib.findNode(this.fPathTools[1]),"");
      vRangeCt.id = 'range-container';
      vRangeCt.innerHTML = i;
          
      var vPgBarCt = this.fPgBarCt = scHPS.xAddElt("div", scPaLib.findNode(this.fPathTools[0]),"");
      vPgBarCt.id = 'progress-container';
      vPgBarCt.innerHTML = '<div id="progress-bar" style="width:0%; height:100%; transition:width 1s; transition-timing-function:linear;"></div>';  
      
      var vBtnPlay = this.fBtnPlay = scHPS.xAddElt("a", scPaLib.findNode(this.fPathTools[1]), "btnPlay", this.fPlay);
      vBtnPlay.innerHTML = "<i></i><span>"+this.fStrings[0]+"</span>";
      vBtnPlay.title = this.fStrings[1];
      vBtnPlay.onclick = this.sPlay;
      
      var vBtnPause = this.fBtnPause = scHPS.xAddElt("a", scPaLib.findNode(this.fPathTools[1]), "btnPause", !this.fPlay);
      vBtnPause.innerHTML = "<i></i><span>"+this.fStrings[2]+"</span>";
      vBtnPause.title = this.fStrings[3];
      vBtnPause.onclick = this.sPause;
	 

      hpsAutomator.getRangeValue();
      
      this.fHeartbeat = window.setInterval(function(){hpsAutomator.sHeartbeat()},this.fTimout);
      scPresMgr.register("onAction", this.sOnAction);
    } catch(e){ scCoLib.log("ERROR - hpsAutomator.onLoad : "+e)}
  },
  /** hpsAutomator.sHeartbeat */
  sHeartbeat : function() {
    if (hpsAutomator.fPlay){
        hpsAutomator.fBtnPlay.style.display = "none";
        hpsAutomator.fBtnPause.style.display = "";
		console.log(beat) ;
        beat++;
		compt = duration - beat ;
		console.log(compt) ;
        if (beat >= duration){
            beat = 0;
            if (scPresMgr.hasNext()) scPresMgr.next();
                else hpsAutomator.sPause();                    
            }
            hpsAutomator.moveProgressBar();
        } 
        else {
            hpsAutomator.fBtnPlay.style.display = "";
            hpsAutomator.fBtnPause.style.display = "none";
            }
    },
  /** hpsAutomator.sOnAction */
  sOnAction : function(pAction) {
    if (pAction === "showZoom" && hpsAutomator.fPlay) hpsAutomator.sPause();
  },
  /** hpsAutomator.sPlay */
  sPlay : function() {
    hpsAutomator.fPlay = true;
    hpsAutomator.fBtnPlay.style.display = "none";
    hpsAutomator.fBtnPause.style.display = "";
  },
  /** hpsAutomator.sPause */
  sPause : function() {
    hpsAutomator.fPlay = false;
    hpsAutomator.fBtnPlay.style.display = "";
    hpsAutomator.fBtnPause.style.display = "none";
  },
  /** hpsAutomator.moveProgressBar*/
  moveProgressBar : function() {
      if ( document.getElementById('progress-bar') ) {
          var w = (beat * (100 / (duration-1)))
          document.getElementById('progress-bar').style.width = w + '%';
		  document.getElementById ('progress-bar').innerHTML=compt ;
          if ( w > 0 && w <= 100 ) {
              document.getElementById('progress-bar').style.visibility = 'visible';
          }
          else {
              document.getElementById('progress-bar').style.visibility = 'hidden';
              }
          }
      },
   /** hpsAutomator.getRangeValue*/   
   getRangeValue : function(){
       if ( document.getElementById("range-slider") && document.getElementById("range-value") ){
          var s = document.getElementById("range-slider");
          var o = document.getElementById("range-value");
          o.innerHTML = s.value + ' s';
          duration = s.value;
          s.oninput = function(){
            o.innerHTML = this.value + ' s';
            duration = this.value;
            }
          }
      }, 

		
  loadSortKey:"Z"

}
}) ();
En attendant de trouver mieux, j'ai rajouté un

Code : Tout sélectionner

text-indent: 40px;
au fichier CSS qui évite au compteur d'être collé.

Encore merci !

Re: Afficher compteur stocké dans une variable

Posté : 23 avr. 2020, 17:50
par webmaster
Il faut créer un nouvel element div#compteur en ajoutant ces lignes en fin de fonction onload

Code : Tout sélectionner

var compteur=document.createElement("div");
compteur.id="compteur";
compteur.style="position: absolute; top: 20px; left:20px; background: #999; color:#fff";
compteur.innerHTML = " progression ";
document.body.appendChild(compteur);
et dans la progression, il suffit d'ajouter
document.getElementById ('compteur').innerHTML=compt ;

Re: Afficher compteur stocké dans une variable

Posté : 23 avr. 2020, 17:56
par Sylvain.P
Merci.
J'essaye tout ça demain dès que je peux !
Heures au format UTC+02:00
Page 1 sur 2
Powered by phpBB® Forum Software © phpBB Limited
https://www.phpbb.com/