Recherche avancée

Sur d’autres sites (8382)

• Anomalie #4562 : Suite #4468 : Unification des CSS pour les boutons et les icônes

  17 février 2021

  Bon bon bon, on a pas mal réfléchi au sujet avec rastapopoulos, et je crois qu’on est arrivé à une solution satisfaisante.
  En tout cas une solution qui répond complètement aux problèmes et besoins soulevés dans ce ticket, en ce qui me concerne.

  Le problème était de ne traiter des icônes que sous l’angle d’une utilisation dans des boutons, de ne le faire qu’à moitié en proposant un jeu d’icônes très restreint, et avec des icônes pas toutes prévues pour cette utilisation qui plus est.

  Dans l’immédiat, pour clôturer ce ticket au plus vite, il s’agirait de faire ça :

  • dans le CSS, retirer complètement les variantes de boutons avec icônes : .bouton_add, .bouton_supprimer, etc. (ça sera fait différemment et mieux).
  • renommer la classe .bouton en .btn : c’est moins verbeux et on comprend aussi bien.
  • préfixer les variantes génériques qui restent : .btn_mini au lieu de .btn mini, etc.
  • finir les derniers petits ajustement visuels.

  Avec ça le ticket pourra enfin être fermé.

  Mais alors comment fait-on pour avoir des icônes dans les boutons ?
  C’est l’étape suivante.

  Des icônes¶

  On s’est dit, tant qu’à faire, autant proposer tout de suite un jeu complet d’icônes symboliques.

  Les besoins sont multiples pour pleins d’éléments d’interface, dans les plugins et dans le core : plier/déplier des trucs, dupliquer un contenu, afficher un menu, remonter dans la hiérarchie, etc., etc. (je fais vite).
  Et chacun doit réimplémenter ça un peu à sa sauce.

  On reprendrait un jeu d’icônes existant, qu’on n’aura pas à maintenir, optimisé, et qui fournit des icônes cohérentes visuellement, utilisables dans tous les contextes.
  Il y a plusieurs choix de jeux d’icônes libres : Bootstrap-icons, Octicon, Material, Entypo, etc.

  Ces icônes seraient utilisables de 2 façons :

  1. Des classes¶

  Quand il s’agit d’icônes purement décoratives, des classes que l’on peut ajouter à n’importe quel élément inline.
  Pour éviter les conflits, on propose la contraption de spip + icon = spicon.
  Cette solution utilise une fontface, l’icône hérite de la taille et de la couleur du texte.

  Pour les boutons, même principe : la classe signifie « ajoute une icône dans cet élément »

  Exemples :

  <span class="CodeRay"><span class="tag">span> <span class="attribute-name">class</span>=<span class="string"><span class="delimiter">"</span><span class="content">spicon_menu</span><span class="delimiter">"</span></span><span class="tag">></span>Ouvrir le menu<span class="tag"></span>
  
  <span class="tag">span> <span class="attribute-name">class</span>=<span class="string"><span class="delimiter">"</span><span class="content">spicon_truc</span><span class="delimiter">"</span></span><span class="tag">></span><span class="tag"></span> Du texte
  
  <span class="tag">span> <span class="attribute-name">class</span>=<span class="string"><span class="delimiter">"</span><span class="content">titrem spicon_machin</span><span class="delimiter">"</span></span><span class="tag">></span>Mon titre<span class="tag"></span>
  
  </span></span></span></span>

  2. Une balise #ICON¶

  En complément, on peut vouloir embarquer une icône svg dans le HTML.

  On propose de reprendre et d’adapter la super balise #ICON du plugin Zcore, qui fait ça très bien.
  Cette balise permet d’embarquer une icône du set par défaut, mais également n’importe quelle autre (je rentre pas dans les détails).

  Un modèle correspondant permettra aussi d’inclure des icônes svg dans les textes :

  <span class="CodeRay">#ICONE{identifiant}
  
  #ICONE{chemin/vers/mon_icone.svg}
  
  #ICONE{#identifiant_autre_set}
  
  </span>

  Identifiants sémantiques¶

  Les identifiants des icônes seront directement ceux du jeu d’icônes choisi.
  Mais ils peuvent avoir des noms un peu barbares : chevron-double-right, eye-slash, grip-vertical, etc.

  Dans tous les cas on pourra les utiliser tels quels, mais en plus de ça, on propose de faire une correspondance sémantique pour les icônes correspondants aux actions les plus courantes. Par exemple au lieu de faire #ICONE{chevron-double-down} on pourra faire #ICONE{deplier}.

  La liste initiale est visible ici : https://demo.hedgedoc.org/3zIXkcFLTVSwV0nKC1_qcA?both

  Voilà, je crois que c’est tout, rastapopoulos tu complètera si j’ai oublié des trucs.
  Peut-être qu’on peut partir sur un nouveau ticket pour ce sujet et la branche dev qui ira avec.

  À vous les studios.

• how to capture html5 video programmatically (headless)

  25 octobre 2019, par ygk

  I am trying to capture html5 video with js/css effects on it programmatically. I tried a couple of methods ;

  1. First I find this great blog post and implemented it. Everything was perfect till I found that phantomjs is not supporting html5 video tag so can not capture the video.

  2. Second option was to use headless chrome to take continuous screenshots and feed these screenshots into ffmpeg to create the video. Although it worked to some level headless chromes screenshots was taking some time.. I couldn’t create a smooth video..

  3. On my third try I gave a chance to chrome’s Page.startScreencast api. It could get video capture but frame rates was really problematic. The reason is that..

  4. Now I am working on xvfb + chrome/firefox + ffmpeg combination for capturing video as mentioned on that comment. Theoretically it is promising but I couldn’t managed to capture a video. Instead I have black screen..

  My setup is below :

  • light-http server having a simple video (web) within html5 video tag ; on localhost
  • start xvfb with Firefox and navigate to localhost/index.html ( video is there )
    xvfb-run --listen-tcp --server-num 44 --auth-file /tmp/xvfb.auth -s "-ac -screen 0 1440x685x24" firefox --headless http://localhost

  • start ffmpeg with x11grab parameter to grab frames from xvfb

    ffmpeg -f x11grab -video_size 1440x685 -i :44 -codec:v libx264 -r 12 ./output.mp4

  • the result is black video :)

  what should be the problem, how can I debug the problem ?

  ---

  ps : there is one more possible solution which I didn’t tried yet. As phantomjs has capability to capture canvas ; it may be possible to

  • put video into canvas
  • then capture the canvas

  It seems like a dirty workaround that is why not tried yet..

  ---

  UPDATE-1

  Tried to get screenshot with xwd -root -silent -display :44 -out screen.xwdand than convert to jpeg convert screen.xwd shot.jpg the result is black jpg..

• Choppy sound when using ffmpeg

  24 novembre 2011, par Kurt

  I suffered some choppy audio when i try to capture audio from a live stream.
  Another essential problem which could explain the problem is that the Wav file created is twice longer than the capture time.

  The audio is perfect when i play the avs input file with ffplay, so the avs is ok, the problem is after whether in the capture or in the Wav writing.

  To capture :

  av_read_frame(pFormatCtx, &packet)
  
  
  
  if(packet.stream_index == mAudioStream)
  
  {
  
      int buff_size = sizeof(mAudioBuffer);
  
      std::cout << "Buff_size " << buff_size << std::endl;
  
      len = avcodec_decode_audio3(pAudioCodecCtx,(int16_t*)mAudioBuffer, &buff_size,&packet);
  
      if(len < 0){
  
          qDebug("Extractor - Audio isEnd = -1;");
  
          mAudioBufferSize = 0;
  
          isEnd = ERROR_;
  
          return isEnd;
  
      }
  
  
  
      // Set packet result type
  
      mFrameType = AUDIO_PKT;
  
      mAudioBufferSize = buff_size;
  
      //store audio synchronization informations:
  
      if(packet.pts != AV_NOPTS_VALUE) {
  
           mAudioPts_ = av_q2d(pFormatCtx->streams[mAudioStream]->time_base);
  
           mAudioPts_ *= packet.pts;
  
      }
  
  }
  
  
  
          // store a copy of current audio frame in _frame
  
          _frame.audioFrame = new decoded_frame_t::audio_frame_t();
  
          _frame.audioFrame->sampleRate = mediaInfos.audioSampleRate;
  
          _frame.audioFrame->sampleSize = mediaInfos.audioSampleSize;
  
          _frame.audioFrame->nbChannels = mediaInfos.audioNbChannels;
  
          _frame.audioFrame->nbSamples = mAudioBufferSize / ((mediaInfos.audioSampleSize/8) * mediaInfos.audioNbChannels);
  
          _frame.audioFrame->buf.resize(mAudioBufferSize);
  
          memcpy(&_frame.audioFrame->buf[0],mAudioBuffer,mAudioBufferSize);

  Then i store in a Wav File using libsndfile :

  SNDFILE*            fd;
  
  SF_INFO             sfInf;
  
  
  
  sfInf.frames = 0;
  
  sfInf.channels = p_capt->ui_nbChannels;
  
  sfInf.samplerate = p_capt->ui_sampleRate;
  
  sfInf.format = SF_FORMAT_WAV | SF_FORMAT_PCM_U8;
  
  sfInf.sections = 0;
  
  sfInf.seekable = 0;
  
  
  
  if (sf_format_check(&sfInf) == FALSE)
  
      std::cout << "Format parameter are uncorrect ! Exit saving !" << std::endl;
  
  else
  
  {
  
      fd = sf_open(fileName.toStdString().c_str(), SFM_WRITE, &sfInf);
  
      if (fd == NULL)
  
      {
  
          std::cout << "Unable to open the file " << fileName.toStdString() << std::endl;
  
          return GRAB_ST_NOK;
  
      }
  
  
  
      //little trick because v_buf is a uint8_t vector
  
      sf_count_t l = sf_write_short(fd, (const short *)(&(p_capt->v_buf[0])), p_capt->v_buf.size()/2);
  
  
  
      if (l != p_capt->v_buf.size()/2)
  
      {
  
         std::cout << "sf_write didn't write the right amoung of bits " << l << " != " << p_capt->v_buf.size()/2 << std::endl;
  
         ret = GRAB_ST_NOK;
  
      }
  
      else
  
      {
  
          sf_write_sync(fd);
  
          sf_close(fd);
  
          ret = GRAB_ST_OK;
  
      }
  
  }

  I hope it's understandable. Waiting for remarks.

  Kurt