kandi background
Explore Kits

grafika | dumping ground for Android graphics & media hacks | iOS library

 by   google Java Version: v1.0-33 License: Apache-2.0

 by   google Java Version: v1.0-33 License: Apache-2.0

Download this library from

kandi X-RAY | grafika Summary

grafika is a Java library typically used in Mobile, iOS applications. grafika has no vulnerabilities, it has build file available, it has a Permissive License and it has high support. However grafika has 51 bugs. You can download it from GitHub.
welcome to grafika, a dumping ground for android graphics & media hacks. grafika is: - a collection of hacks exercising graphics features. - an sdk app, developed for api 18 (android 4.3). while some of the code may work with older versions of android, some sporatic work is done to support them. - open source (apache 2 license), copyright by google. so you can use the code according to the terms of the license (see "license"). - a perpetual work-in-progress. it’s updated whenever the need arises. however: - it’s not stable. - it’s not polished or well tested. expect the ui to be ugly and awkward. - it’s not intended as a demonstration of the proper way to do things. the code may handle edge cases poorly or not at all. logging is often left enabled at a moderately verbose level. - it’s barely documented. - it’s not part of the android open source project. we cannot accept contributions to grafika, even if you have an aosp cla on file. - it’s not an official google product. it’s just a bunch of stuff that got thrown together on company time and equipment. - it’s generally just not supported. to some extent, grafika can be treated as a companion to the [android system-level graphics
Support
Support
Quality
Quality
Security
Security
License
License
Reuse
Reuse

kandi-support Support

  • grafika has a highly active ecosystem.
  • It has 5220 star(s) with 1270 fork(s). There are 327 watchers for this library.
  • It had no major release in the last 12 months.
  • There are 47 open issues and 53 have been closed. On average issues are closed in 65 days. There are 7 open pull requests and 0 closed requests.
  • It has a positive sentiment in the developer community.
  • The latest version of grafika is v1.0-33
grafika Support
Best in #iOS
Average in #iOS
grafika Support
Best in #iOS
Average in #iOS

quality kandi Quality

  • grafika has 51 bugs (1 blocker, 1 critical, 31 major, 18 minor) and 349 code smells.
grafika Quality
Best in #iOS
Average in #iOS
grafika Quality
Best in #iOS
Average in #iOS

securitySecurity

  • grafika has no vulnerabilities reported, and its dependent libraries have no vulnerabilities reported.
  • grafika code analysis shows 0 unresolved vulnerabilities.
  • There are 4 security hotspots that need review.
grafika Security
Best in #iOS
Average in #iOS
grafika Security
Best in #iOS
Average in #iOS

license License

  • grafika is licensed under the Apache-2.0 License. This license is Permissive.
  • Permissive licenses have the least restrictions, and you can use them in most projects.
grafika License
Best in #iOS
Average in #iOS
grafika License
Best in #iOS
Average in #iOS

buildReuse

  • grafika releases are available to install and integrate.
  • Build file is available. You can build the component from source.
  • grafika saves you 4325 person hours of effort in developing the same functionality from scratch.
  • It has 9166 lines of code, 546 functions and 83 files.
  • It has medium code complexity. Code complexity directly impacts maintainability of the code.
grafika Reuse
Best in #iOS
Average in #iOS
grafika Reuse
Best in #iOS
Average in #iOS
Top functions reviewed by kandi - BETA

kandi has reviewed grafika and discovered the below as its top functions. This is intended to give you an instant insight into grafika implemented functionality, and help decide if they suit your requirements.

  • Perform the actual extraction .
  • Invoked when the app is created .
  • Called when a draw frame is drawn .
  • Pre render before rendering .
  • Wait for the encoder to end of the encoder .
  • Opens the camera to be used .
  • Prepare the encoder .
  • This method is called to set view aspect ratio .
  • Draw the color bars for the surface .
  • Gather the GL information .

grafika Key Features

[* Play video (TextureView)](app/src/main/java/com/android/grafika/PlayMovieActivity.java). Plays the video track from an MP4 file. - Only sees files in /data/data/com.android.grafika/files/. All of the activities that create video leave their files there. You’ll also find two automatically-generated videos (gen-eight-rects.mp4 and gen-slides.mp4). - By default the video is played once, at the same rate it was recorded. You can use the checkboxes to loop playback and/or play the frames at a fixed rate of 60 FPS. - Uses a TextureView for output. - Name starts with an asterisk so it’s at the top of the list of activities. [Continuous capture](app/src/main/java/com/android/grafika/ContinuousCaptureActivity.java). Stores video in a circular buffer, saving it when you hit the "capture" button. (Formerly "Constant capture".) - Currently hard-wired to try to capture 7 seconds of video from the camera at 6MB/sec, preferably 15fps 720p. That requires a buffer size of about 5MB. - The time span of frames currently held in the buffer is displayed. The actual time span saved when you hit "capture" will be slightly less than what is shown because we have to start the output on a sync frame, which are configured to appear once per second. - Output is a video-only MP4 file ("constant-capture.mp4"). Video is always 1280x720, which usually matches what the camera provides; if it doesn’t, the recorded video will have the wrong aspect ratio. [Double decode](app/src/main/java/com/android/grafika/DoubleDecodeActivity.java). Decodes two video streams side-by-side to a pair of TextureViews. - Plays the two auto-generated videos. Note they play at different rates. - The video decoders don’t stop when the screen is rotated. We retain the SurfaceTexture and just attach it to the new TextureView. Useful for avoiding expensive codec reconfigures. The decoders do stop if you leave the activity, so we don’t tie up hardware codec resources indefinitely. (It also doesn’t stop if you turn the screen off with the power button, which isn’t good for the battery, but might be handy if you’re feeding an external display or your player also handles audio.) - Unlike most activities in Grafika, this provides different layouts for portrait and landscape. The videos are scaled to fit. [Hardware scaler exerciser](app/src/main/java/com/android/grafika/HardwareScalerActivity.java). Shows GL rendering with on-the-fly surface size changes. - The motivation behind the feature this explores is described in a developer blog post: http://android-developers.blogspot.com/2013/09/using-hardware-scaler-for-performance.html - You will see one frame rendered incorrectly when changing sizes. This is because the render size is adjusted in the "surface changed" callback, but the surface’s size doesn’t actually change until we latch the next buffer. This is straightforward to fix (left as an exercise for the reader). [Live camera (TextureView)](app/src/main/java/com/android/grafika/LiveCameraActivity.java). Directs the camera preview to a TextureView. - This comes more or less verbatim from the [TextureView](http://developer.android.com/reference/android/view/TextureView.html) documentation. - Uses the default (rear-facing) camera. If the device has no default camera (e.g. Nexus 7 (2012)), the Activity will crash. [Multi-surface test](app/src/main/java/com/android/grafika/MultiSurfaceTest.java). Simple activity with three overlapping SurfaceViews, one marked secure. - Useful for examining HWC behavior with multiple static layers, and screencap / screenrecord behavior with a secure surface. (If you record the screen one of the circles should be missing, and capturing the screen should just show black.) - If you tap the "bounce" button, the circle on the non-secure layer will animate. It will update as quickly as possible, which may be slower than the display refresh rate because the circle is rendered in software. The frame rate will be reported in logcat. [Play video (SurfaceView)](app/src/main/java/com/android/grafika/PlayMovieSurfaceActivity.java). Plays the video track from an MP4 file. - Works very much like "Play video (TextureView)", though not all features are present. See the class comment for a list of advantages to using SurfaceView. [Record GL app](app/src/main/java/com/android/grafika/RecordFBOActivity.java). Simultaneously draws to the display and to a video encoder with OpenGL ES, using framebuffer objects to avoid re-rendering. - It can write to the video encoder three different ways: (1) draw twice; (2) draw offscreen and blit twice; (3) draw onscreen and blit framebuffer. #3 doesn’t work yet. - The renderer is trigged by Choreographer to update every vsync. If we get too far behind, we will skip frames. This is noted by an on-screen drop counter and a border flash. You generally won’t see any stutter in the animation, because we don’t skip the object movement, just the render. - The encoder is fed every-other frame, so the recorded output will be ~30fps rather than ~60fps on a typical device. - The recording is letter- or pillar-boxed to maintain an aspect ratio that matches the display, so you’ll get different results from recording in landscape vs. portrait. - The output is a video-only MP4 file ("fbo-gl-recording.mp4"). [Record Screen using MediaProjectionManager](app/src/main/java/com/android/grafika/ScreenRecordActivity.java). Records the screen to a movie using the MediaProjectionManager. This API requires API level 23 (Marshmallow) or greater. [Scheduled swap](app/src/main/java/com/android/grafika/ScheduledSwapActivity.java). Exercises a SurfaceFlinger feature that allows you to submit buffers to be displayed at a specific time. - Requires API 19 (Android 4.4 "KitKat") to do what it’s supposed to. The current implementation doesn’t really look any different on API 18 to the naked eye. - You can configure the frame delivery timing (e.g. 24fps uses a 3-2 pattern) and how far in advance frames are scheduled. Selecting "ASAP" disables scheduling. - Use systrace with tags sched gfx view --app=com.android.grafika to observe the effects. - The moving square changes colors when the app is unhappy about timing. [Show + capture camera](app/src/main/java/com/android/grafika/CameraCaptureActivity.java). Attempts to record at 720p from the front-facing camera, displaying the preview and recording it simultaneously. - Use the record button to toggle recording on and off. - Recording continues until stopped. If you back out and return, recording will start again, with a real-time gap. If you try to play the movie while it’s recording, you will see an incomplete file (and probably cause the play movie activity to crash). - The recorded video is scaled to 640x480, so it will probably look squished. A real app would either set the recording size equal to the camera input size, or correct the aspect ratio by letter- or pillar-boxing the frames as they are rendered to the encoder. - You can select a filter to apply to the preview. It does not get applied to the recording. The shader used for the filters is not optimized, but seems to perform well on most devices (the original Nexus 7 (2012) being a notable exception). Demo here: http://www.youtube.com/watch?v=kH9kCP2T5Gg - The output is a video-only MP4 file ("camera-test.mp4"). [Simple Canvas in TextureView](app/src/main/java/com/android/grafika/TextureViewCanvasActivity.java). Exercises software rendering to a TextureView with a Canvas. - Renders as quickly as possible. Because it’s using software rendering, this will likely run more slowly than the "Simple GL in TextureView" activity. - Toggles the use of a dirty rect every 64 frames. When enabled, the dirty rect extends horizontally across the screen. [Simple GL in TextureView](app/src/main/java/com/android/grafika/TextureViewGLActivity.java). Demonstates simple use of GLES in a TextureView, rather than a GLSurfaceView. - Renders as quickly as possible. On most devices it will exceed 60fps and flicker wildly, but in 4.4 ("KitKat") a bug prevents the system from dropping frames. [Texture from Camera](app/src/main/java/com/android/grafika/TextureFromCameraActivity.java). Renders Camera preview output with a GLES texture. - Adjust the sliders to set the size, rotation, and zoom. Touch anywhere else to center the rect at the point of the touch. [Color bars](app/src/main/java/com/android/grafika/ColorBarActivity.java). Displays RGB color bars. [OpenGL ES Info](app/src/main/java/com/android/grafika/GlesInfoActivity.java). Dumps version info and extension lists. - The "Save" button writes a copy of the output to the app’s file area. [glTexImage2D speed test](app/src/main/java/com/android/grafika/TextureUploadActivity.java). Simple, unscientific measurement of the time required to upload a 512x512 RGBA texture with glTexImage2D(). [glReadPixels speed test](app/src/main/java/com/android/grafika/ReadPixelsActivity.java). Simple, unscientific measurement of the time required for glReadPixels() to read a 720p frame.

Unwanted transition delay on header

copy iconCopydownload iconDownload
const header = document.getElementById("header"),
      _top = -header.getBoundingClientRect().height + "px";

header.style.top = _top;
window.onscroll = function() {
  slideInHeader();
}

function slideInHeader() {
  if (document.body.scrollTop > 70 || document.documentElement.scrollTop > 70) {
    header.style.top = "0";
  } else {
    header.style.top = _top;
  }
}
html,
body {
  height: 300%;
}

header {
  z-index: 3;
  width: 100%;
  position: fixed;
  top: -100%;
  transition-delay: 0s;
  transition: 0.6s;
}
<header id="header">
  <div class="header-container">
    <div class="header-downbar">
      <div class="header-downbar-content">
        <div class="header-logo">
          <div class="header-logo-container">
            <a href="index.php"><img src="grafika/Fenix-logo-white.png" alt=""></a>
          </div>
        </div>
        <div class="header-navbar">
          <nav>
            <ul>
              <a href="">
                <li>
                  <p class="link">XXXX</p>
                </li>
              </a>
              <a href="">
                <li>
                  <p class="link">XXXX</p>
                </li>
              </a>
              <a href="">
                <li>
                  <p class="link">XXXX</p>
                </li>
              </a>
              <a href="">
                <li>
                  <p class="link">XXXX</p>
                </li>
              </a>
            </ul>
          </nav>
        </div>
      </div>
    </div>
  </div>
</header>
-----------------------
const header = document.getElementById("header"),
      _top = -header.getBoundingClientRect().height + "px";

header.style.top = _top;
window.onscroll = function() {
  slideInHeader();
}

function slideInHeader() {
  if (document.body.scrollTop > 70 || document.documentElement.scrollTop > 70) {
    header.style.top = "0";
  } else {
    header.style.top = _top;
  }
}
html,
body {
  height: 300%;
}

header {
  z-index: 3;
  width: 100%;
  position: fixed;
  top: -100%;
  transition-delay: 0s;
  transition: 0.6s;
}
<header id="header">
  <div class="header-container">
    <div class="header-downbar">
      <div class="header-downbar-content">
        <div class="header-logo">
          <div class="header-logo-container">
            <a href="index.php"><img src="grafika/Fenix-logo-white.png" alt=""></a>
          </div>
        </div>
        <div class="header-navbar">
          <nav>
            <ul>
              <a href="">
                <li>
                  <p class="link">XXXX</p>
                </li>
              </a>
              <a href="">
                <li>
                  <p class="link">XXXX</p>
                </li>
              </a>
              <a href="">
                <li>
                  <p class="link">XXXX</p>
                </li>
              </a>
              <a href="">
                <li>
                  <p class="link">XXXX</p>
                </li>
              </a>
            </ul>
          </nav>
        </div>
      </div>
    </div>
  </div>
</header>
-----------------------
const header = document.getElementById("header"),
      _top = -header.getBoundingClientRect().height + "px";

header.style.top = _top;
window.onscroll = function() {
  slideInHeader();
}

function slideInHeader() {
  if (document.body.scrollTop > 70 || document.documentElement.scrollTop > 70) {
    header.style.top = "0";
  } else {
    header.style.top = _top;
  }
}
html,
body {
  height: 300%;
}

header {
  z-index: 3;
  width: 100%;
  position: fixed;
  top: -100%;
  transition-delay: 0s;
  transition: 0.6s;
}
<header id="header">
  <div class="header-container">
    <div class="header-downbar">
      <div class="header-downbar-content">
        <div class="header-logo">
          <div class="header-logo-container">
            <a href="index.php"><img src="grafika/Fenix-logo-white.png" alt=""></a>
          </div>
        </div>
        <div class="header-navbar">
          <nav>
            <ul>
              <a href="">
                <li>
                  <p class="link">XXXX</p>
                </li>
              </a>
              <a href="">
                <li>
                  <p class="link">XXXX</p>
                </li>
              </a>
              <a href="">
                <li>
                  <p class="link">XXXX</p>
                </li>
              </a>
              <a href="">
                <li>
                  <p class="link">XXXX</p>
                </li>
              </a>
            </ul>
          </nav>
        </div>
      </div>
    </div>
  </div>
</header>

How do I check two options at once in the option quiz?

copy iconCopydownload iconDownload
function check() {
  var question1 = document.querySelector('input[name="question1"]:checked');
  var question2 = document.querySelectorAll('input[name="question2"]:checked');
  var correct = 0;

  if (question1 != null && question1.value == "Červená, Zelená, Modrá") {
    correct++;
  }

  var q2answers = ["Rastrová grafika", "Vektorová grafika"];
  var correctQ2NumAnswers = (q2answers.length == question2.length);
  var correctQ2AnswersCount = 0;

  question2.forEach(function(el) {
    if (q2answers.includes(el.value)) correctQ2AnswersCount++;;
  });
 
  if (correctQ2NumAnswers == true && correctQ2AnswersCount == q2answers.length) correct++;

  document.getElementById("number_correct").innerHTML = "Máš " + correct + " otázky/otázek správně.";
}

document.querySelector("#check").addEventListener("click", check);
<form class="quiz">
  <p style="font-weight: 900">V RGB modelu se jedná o jaké barvy?</p>
  <input type="radio" class='question1' name="question1" value="Červená, Zelená, Modrá"> Červená, Zelená, Modrá<br>
  <input type="radio" class='question1' name="question1" value="Červená, Zelená, Žlutá"> Červená, Zelená, Žlutá<br>
  <input type="radio" class='question1' name="question1" value="Černá, Fialová, Modrá"> Červená, Fialová, Modrá<br>
</form>
<form class="quiz">
  <p style="font-weight: 900">Způsoby jakým počítače ukládají a zpracovávají obrazové informace se nazývají? (Vyber dvě možnosti)</p>
  <input type="checkbox" class='question2' name="question2" value="3D grafika"> 3D grafika<br>
  <input type="checkbox" class='question2' name="question2" value="Vektorová grafika"> Vektorová grafika<br>
  <input type="checkbox" class='question2' name="question2" value="Fotografika"> Fotografika<br>
  <input type="checkbox" class='question2' name="question2" value="Rastrová grafika"> Rastrová grafika<br>
</form>
<br>
<div id="number_correct"></div>
<button type="button" id="check">
Check Answers
</button>
-----------------------
function check() {
  var question1 = document.querySelector('input[name="question1"]:checked');
  var question2 = document.querySelectorAll('input[name="question2"]:checked');
  var correct = 0;

  if (question1 != null && question1.value == "Červená, Zelená, Modrá") {
    correct++;
  }

  var q2answers = ["Rastrová grafika", "Vektorová grafika"];
  var correctQ2NumAnswers = (q2answers.length == question2.length);
  var correctQ2AnswersCount = 0;

  question2.forEach(function(el) {
    if (q2answers.includes(el.value)) correctQ2AnswersCount++;;
  });
 
  if (correctQ2NumAnswers == true && correctQ2AnswersCount == q2answers.length) correct++;

  document.getElementById("number_correct").innerHTML = "Máš " + correct + " otázky/otázek správně.";
}

document.querySelector("#check").addEventListener("click", check);
<form class="quiz">
  <p style="font-weight: 900">V RGB modelu se jedná o jaké barvy?</p>
  <input type="radio" class='question1' name="question1" value="Červená, Zelená, Modrá"> Červená, Zelená, Modrá<br>
  <input type="radio" class='question1' name="question1" value="Červená, Zelená, Žlutá"> Červená, Zelená, Žlutá<br>
  <input type="radio" class='question1' name="question1" value="Černá, Fialová, Modrá"> Červená, Fialová, Modrá<br>
</form>
<form class="quiz">
  <p style="font-weight: 900">Způsoby jakým počítače ukládají a zpracovávají obrazové informace se nazývají? (Vyber dvě možnosti)</p>
  <input type="checkbox" class='question2' name="question2" value="3D grafika"> 3D grafika<br>
  <input type="checkbox" class='question2' name="question2" value="Vektorová grafika"> Vektorová grafika<br>
  <input type="checkbox" class='question2' name="question2" value="Fotografika"> Fotografika<br>
  <input type="checkbox" class='question2' name="question2" value="Rastrová grafika"> Rastrová grafika<br>
</form>
<br>
<div id="number_correct"></div>
<button type="button" id="check">
Check Answers
</button>

How do I cancel the tracking of two or more functions on the buttons at once?

copy iconCopydownload iconDownload
<div class="theory">
    <h3>Rastrová grafika</h3>
    <p>Rastrová grafika (či bitmapová grafika) je jeden ze dvou základních způsobů, jakým počítače ukládají a zpracovávají obrazové informace (druhý způsob je vektorová grafika).
        V rastrové grafice je celý obrázek <span class="dots">...</span><span class="more">popsán pomocí jednotlivých barevných bodů (pixelů). Body jsou uspořádány do mřížky. 
        Každý bod má určen svou přesnou polohu a barvu v nějakém barevném modelu (např. RGB). Tento způsob popisu obrázků používá např. televize nebo digitální fotoaparát.</span></p>
        <button onclick="readMore(this)" class="btn" class="theory-btn">Číst dále</button>
</div>
<hr>
<div class="theory">
    <h3>Souřadnice</h3>
    <p>Soustava souřadnic (též souřadnicová soustava či systém souřadnic) umožňuje jednoznačně popsat polohu bodu pomocí čísel jakožto souřadnic čili koordinát. Geometrické úlohy je pak možno řešit <span class="dots">...</span><span class="more">matematickými prostředky, což je základ analytické geometrie. 
        Polohu bodu na přímce určuje jedno (reálné) číslo, v rovině dvě, v prostoru tři čísla atd. Obecně je k určení polohy bodu v n-rozměrném prostoru třeba n čísel, která tvoří uspořádané n-tice (čti entice), neboť na jejich pořadí záleží. 
        Polohu přímky lze pak označit pomocí dvou bodů, polohu roviny pomocí tří bodů a podobně i pro další geometrické útvary.</span></p>
        <button onclick="readMore(this)" class"btn" class="theory-btn">Číst dále</button>
</div>
.more{
    display: none;
}
function readMore(el) {
    dots = el.previousElementSibling.childNodes[1];
    more = el.previousElementSibling.childNodes[2];
    if (dots.style.display == "none") {
        dots.style.display = "inline";
        el.innerHTML = "Číst dále"
        more.style.display = "none";
    } else {
        dots.style.display = "none";
        el.innerHTML = "Zavřít"
        more.style.display = "inline";
    }
}
function readMore(el) {
    dots = el.previousElementSibling.childNodes[1];
    more = el.previousElementSibling.childNodes[2];
    if (dots.style.display == "none") {
        dots.style.display = "inline";
        el.innerHTML = "Číst dále"
        more.style.display = "none";
    } else {
        dots.style.display = "none";
        el.innerHTML = "Zavřít"
        more.style.display = "inline";
    }
}
body.dark .theory {
    /*letter-spacing: -1px;*/
    color: white;
}

body .theory {
    /*letter-spacing: -1px;*/
    /*word-spacing: -2px;*/
    color: black;
}

.theory-btn{
    
}

.more{
    display: none;
}
<div class="theory">
        <h3>Rastrová grafika</h3>
        <p>Rastrová grafika (či bitmapová grafika) je jeden ze dvou základních způsobů, jakým počítače ukládají a zpracovávají obrazové informace (druhý způsob je vektorová grafika).
            V rastrové grafice je celý obrázek <span class="dots">...</span><span class="more">popsán pomocí jednotlivých barevných bodů (pixelů). Body jsou uspořádány do mřížky. 
            Každý bod má určen svou přesnou polohu a barvu v nějakém barevném modelu (např. RGB). Tento způsob popisu obrázků používá např. televize nebo digitální fotoaparát.</span></p>
            <button onclick="readMore(this)" class="btn" class="theory-btn">Číst dále</button>
    </div>
    <hr>
    <div class="theory">
        <h3>Souřadnice</h3>
        <p>Soustava souřadnic (též souřadnicová soustava či systém souřadnic) umožňuje jednoznačně popsat polohu bodu pomocí čísel jakožto souřadnic čili koordinát. Geometrické úlohy je pak možno řešit <span class="dots">...</span><span class="more">matematickými prostředky, což je základ analytické geometrie. 
            Polohu bodu na přímce určuje jedno (reálné) číslo, v rovině dvě, v prostoru tři čísla atd. Obecně je k určení polohy bodu v n-rozměrném prostoru třeba n čísel, která tvoří uspořádané n-tice (čti entice), neboť na jejich pořadí záleží. 
            Polohu přímky lze pak označit pomocí dvou bodů, polohu roviny pomocí tří bodů a podobně i pro další geometrické útvary.</span></p>
            <button onclick="readMore(this)" class"btn" class="theory-btn">Číst dále</button>
    </div>
-----------------------
<div class="theory">
    <h3>Rastrová grafika</h3>
    <p>Rastrová grafika (či bitmapová grafika) je jeden ze dvou základních způsobů, jakým počítače ukládají a zpracovávají obrazové informace (druhý způsob je vektorová grafika).
        V rastrové grafice je celý obrázek <span class="dots">...</span><span class="more">popsán pomocí jednotlivých barevných bodů (pixelů). Body jsou uspořádány do mřížky. 
        Každý bod má určen svou přesnou polohu a barvu v nějakém barevném modelu (např. RGB). Tento způsob popisu obrázků používá např. televize nebo digitální fotoaparát.</span></p>
        <button onclick="readMore(this)" class="btn" class="theory-btn">Číst dále</button>
</div>
<hr>
<div class="theory">
    <h3>Souřadnice</h3>
    <p>Soustava souřadnic (též souřadnicová soustava či systém souřadnic) umožňuje jednoznačně popsat polohu bodu pomocí čísel jakožto souřadnic čili koordinát. Geometrické úlohy je pak možno řešit <span class="dots">...</span><span class="more">matematickými prostředky, což je základ analytické geometrie. 
        Polohu bodu na přímce určuje jedno (reálné) číslo, v rovině dvě, v prostoru tři čísla atd. Obecně je k určení polohy bodu v n-rozměrném prostoru třeba n čísel, která tvoří uspořádané n-tice (čti entice), neboť na jejich pořadí záleží. 
        Polohu přímky lze pak označit pomocí dvou bodů, polohu roviny pomocí tří bodů a podobně i pro další geometrické útvary.</span></p>
        <button onclick="readMore(this)" class"btn" class="theory-btn">Číst dále</button>
</div>
.more{
    display: none;
}
function readMore(el) {
    dots = el.previousElementSibling.childNodes[1];
    more = el.previousElementSibling.childNodes[2];
    if (dots.style.display == "none") {
        dots.style.display = "inline";
        el.innerHTML = "Číst dále"
        more.style.display = "none";
    } else {
        dots.style.display = "none";
        el.innerHTML = "Zavřít"
        more.style.display = "inline";
    }
}
function readMore(el) {
    dots = el.previousElementSibling.childNodes[1];
    more = el.previousElementSibling.childNodes[2];
    if (dots.style.display == "none") {
        dots.style.display = "inline";
        el.innerHTML = "Číst dále"
        more.style.display = "none";
    } else {
        dots.style.display = "none";
        el.innerHTML = "Zavřít"
        more.style.display = "inline";
    }
}
body.dark .theory {
    /*letter-spacing: -1px;*/
    color: white;
}

body .theory {
    /*letter-spacing: -1px;*/
    /*word-spacing: -2px;*/
    color: black;
}

.theory-btn{
    
}

.more{
    display: none;
}
<div class="theory">
        <h3>Rastrová grafika</h3>
        <p>Rastrová grafika (či bitmapová grafika) je jeden ze dvou základních způsobů, jakým počítače ukládají a zpracovávají obrazové informace (druhý způsob je vektorová grafika).
            V rastrové grafice je celý obrázek <span class="dots">...</span><span class="more">popsán pomocí jednotlivých barevných bodů (pixelů). Body jsou uspořádány do mřížky. 
            Každý bod má určen svou přesnou polohu a barvu v nějakém barevném modelu (např. RGB). Tento způsob popisu obrázků používá např. televize nebo digitální fotoaparát.</span></p>
            <button onclick="readMore(this)" class="btn" class="theory-btn">Číst dále</button>
    </div>
    <hr>
    <div class="theory">
        <h3>Souřadnice</h3>
        <p>Soustava souřadnic (též souřadnicová soustava či systém souřadnic) umožňuje jednoznačně popsat polohu bodu pomocí čísel jakožto souřadnic čili koordinát. Geometrické úlohy je pak možno řešit <span class="dots">...</span><span class="more">matematickými prostředky, což je základ analytické geometrie. 
            Polohu bodu na přímce určuje jedno (reálné) číslo, v rovině dvě, v prostoru tři čísla atd. Obecně je k určení polohy bodu v n-rozměrném prostoru třeba n čísel, která tvoří uspořádané n-tice (čti entice), neboť na jejich pořadí záleží. 
            Polohu přímky lze pak označit pomocí dvou bodů, polohu roviny pomocí tří bodů a podobně i pro další geometrické útvary.</span></p>
            <button onclick="readMore(this)" class"btn" class="theory-btn">Číst dále</button>
    </div>
-----------------------
<div class="theory">
    <h3>Rastrová grafika</h3>
    <p>Rastrová grafika (či bitmapová grafika) je jeden ze dvou základních způsobů, jakým počítače ukládají a zpracovávají obrazové informace (druhý způsob je vektorová grafika).
        V rastrové grafice je celý obrázek <span class="dots">...</span><span class="more">popsán pomocí jednotlivých barevných bodů (pixelů). Body jsou uspořádány do mřížky. 
        Každý bod má určen svou přesnou polohu a barvu v nějakém barevném modelu (např. RGB). Tento způsob popisu obrázků používá např. televize nebo digitální fotoaparát.</span></p>
        <button onclick="readMore(this)" class="btn" class="theory-btn">Číst dále</button>
</div>
<hr>
<div class="theory">
    <h3>Souřadnice</h3>
    <p>Soustava souřadnic (též souřadnicová soustava či systém souřadnic) umožňuje jednoznačně popsat polohu bodu pomocí čísel jakožto souřadnic čili koordinát. Geometrické úlohy je pak možno řešit <span class="dots">...</span><span class="more">matematickými prostředky, což je základ analytické geometrie. 
        Polohu bodu na přímce určuje jedno (reálné) číslo, v rovině dvě, v prostoru tři čísla atd. Obecně je k určení polohy bodu v n-rozměrném prostoru třeba n čísel, která tvoří uspořádané n-tice (čti entice), neboť na jejich pořadí záleží. 
        Polohu přímky lze pak označit pomocí dvou bodů, polohu roviny pomocí tří bodů a podobně i pro další geometrické útvary.</span></p>
        <button onclick="readMore(this)" class"btn" class="theory-btn">Číst dále</button>
</div>
.more{
    display: none;
}
function readMore(el) {
    dots = el.previousElementSibling.childNodes[1];
    more = el.previousElementSibling.childNodes[2];
    if (dots.style.display == "none") {
        dots.style.display = "inline";
        el.innerHTML = "Číst dále"
        more.style.display = "none";
    } else {
        dots.style.display = "none";
        el.innerHTML = "Zavřít"
        more.style.display = "inline";
    }
}
function readMore(el) {
    dots = el.previousElementSibling.childNodes[1];
    more = el.previousElementSibling.childNodes[2];
    if (dots.style.display == "none") {
        dots.style.display = "inline";
        el.innerHTML = "Číst dále"
        more.style.display = "none";
    } else {
        dots.style.display = "none";
        el.innerHTML = "Zavřít"
        more.style.display = "inline";
    }
}
body.dark .theory {
    /*letter-spacing: -1px;*/
    color: white;
}

body .theory {
    /*letter-spacing: -1px;*/
    /*word-spacing: -2px;*/
    color: black;
}

.theory-btn{
    
}

.more{
    display: none;
}
<div class="theory">
        <h3>Rastrová grafika</h3>
        <p>Rastrová grafika (či bitmapová grafika) je jeden ze dvou základních způsobů, jakým počítače ukládají a zpracovávají obrazové informace (druhý způsob je vektorová grafika).
            V rastrové grafice je celý obrázek <span class="dots">...</span><span class="more">popsán pomocí jednotlivých barevných bodů (pixelů). Body jsou uspořádány do mřížky. 
            Každý bod má určen svou přesnou polohu a barvu v nějakém barevném modelu (např. RGB). Tento způsob popisu obrázků používá např. televize nebo digitální fotoaparát.</span></p>
            <button onclick="readMore(this)" class="btn" class="theory-btn">Číst dále</button>
    </div>
    <hr>
    <div class="theory">
        <h3>Souřadnice</h3>
        <p>Soustava souřadnic (též souřadnicová soustava či systém souřadnic) umožňuje jednoznačně popsat polohu bodu pomocí čísel jakožto souřadnic čili koordinát. Geometrické úlohy je pak možno řešit <span class="dots">...</span><span class="more">matematickými prostředky, což je základ analytické geometrie. 
            Polohu bodu na přímce určuje jedno (reálné) číslo, v rovině dvě, v prostoru tři čísla atd. Obecně je k určení polohy bodu v n-rozměrném prostoru třeba n čísel, která tvoří uspořádané n-tice (čti entice), neboť na jejich pořadí záleží. 
            Polohu přímky lze pak označit pomocí dvou bodů, polohu roviny pomocí tří bodů a podobně i pro další geometrické útvary.</span></p>
            <button onclick="readMore(this)" class"btn" class="theory-btn">Číst dále</button>
    </div>
-----------------------
<div class="theory">
    <h3>Rastrová grafika</h3>
    <p>Rastrová grafika (či bitmapová grafika) je jeden ze dvou základních způsobů, jakým počítače ukládají a zpracovávají obrazové informace (druhý způsob je vektorová grafika).
        V rastrové grafice je celý obrázek <span class="dots">...</span><span class="more">popsán pomocí jednotlivých barevných bodů (pixelů). Body jsou uspořádány do mřížky. 
        Každý bod má určen svou přesnou polohu a barvu v nějakém barevném modelu (např. RGB). Tento způsob popisu obrázků používá např. televize nebo digitální fotoaparát.</span></p>
        <button onclick="readMore(this)" class="btn" class="theory-btn">Číst dále</button>
</div>
<hr>
<div class="theory">
    <h3>Souřadnice</h3>
    <p>Soustava souřadnic (též souřadnicová soustava či systém souřadnic) umožňuje jednoznačně popsat polohu bodu pomocí čísel jakožto souřadnic čili koordinát. Geometrické úlohy je pak možno řešit <span class="dots">...</span><span class="more">matematickými prostředky, což je základ analytické geometrie. 
        Polohu bodu na přímce určuje jedno (reálné) číslo, v rovině dvě, v prostoru tři čísla atd. Obecně je k určení polohy bodu v n-rozměrném prostoru třeba n čísel, která tvoří uspořádané n-tice (čti entice), neboť na jejich pořadí záleží. 
        Polohu přímky lze pak označit pomocí dvou bodů, polohu roviny pomocí tří bodů a podobně i pro další geometrické útvary.</span></p>
        <button onclick="readMore(this)" class"btn" class="theory-btn">Číst dále</button>
</div>
.more{
    display: none;
}
function readMore(el) {
    dots = el.previousElementSibling.childNodes[1];
    more = el.previousElementSibling.childNodes[2];
    if (dots.style.display == "none") {
        dots.style.display = "inline";
        el.innerHTML = "Číst dále"
        more.style.display = "none";
    } else {
        dots.style.display = "none";
        el.innerHTML = "Zavřít"
        more.style.display = "inline";
    }
}
function readMore(el) {
    dots = el.previousElementSibling.childNodes[1];
    more = el.previousElementSibling.childNodes[2];
    if (dots.style.display == "none") {
        dots.style.display = "inline";
        el.innerHTML = "Číst dále"
        more.style.display = "none";
    } else {
        dots.style.display = "none";
        el.innerHTML = "Zavřít"
        more.style.display = "inline";
    }
}
body.dark .theory {
    /*letter-spacing: -1px;*/
    color: white;
}

body .theory {
    /*letter-spacing: -1px;*/
    /*word-spacing: -2px;*/
    color: black;
}

.theory-btn{
    
}

.more{
    display: none;
}
<div class="theory">
        <h3>Rastrová grafika</h3>
        <p>Rastrová grafika (či bitmapová grafika) je jeden ze dvou základních způsobů, jakým počítače ukládají a zpracovávají obrazové informace (druhý způsob je vektorová grafika).
            V rastrové grafice je celý obrázek <span class="dots">...</span><span class="more">popsán pomocí jednotlivých barevných bodů (pixelů). Body jsou uspořádány do mřížky. 
            Každý bod má určen svou přesnou polohu a barvu v nějakém barevném modelu (např. RGB). Tento způsob popisu obrázků používá např. televize nebo digitální fotoaparát.</span></p>
            <button onclick="readMore(this)" class="btn" class="theory-btn">Číst dále</button>
    </div>
    <hr>
    <div class="theory">
        <h3>Souřadnice</h3>
        <p>Soustava souřadnic (též souřadnicová soustava či systém souřadnic) umožňuje jednoznačně popsat polohu bodu pomocí čísel jakožto souřadnic čili koordinát. Geometrické úlohy je pak možno řešit <span class="dots">...</span><span class="more">matematickými prostředky, což je základ analytické geometrie. 
            Polohu bodu na přímce určuje jedno (reálné) číslo, v rovině dvě, v prostoru tři čísla atd. Obecně je k určení polohy bodu v n-rozměrném prostoru třeba n čísel, která tvoří uspořádané n-tice (čti entice), neboť na jejich pořadí záleží. 
            Polohu přímky lze pak označit pomocí dvou bodů, polohu roviny pomocí tří bodů a podobně i pro další geometrické útvary.</span></p>
            <button onclick="readMore(this)" class"btn" class="theory-btn">Číst dále</button>
    </div>
-----------------------
<div class="theory">
    <h3>Rastrová grafika</h3>
    <p>Rastrová grafika (či bitmapová grafika) je jeden ze dvou základních způsobů, jakým počítače ukládají a zpracovávají obrazové informace (druhý způsob je vektorová grafika).
        V rastrové grafice je celý obrázek <span class="dots">...</span><span class="more">popsán pomocí jednotlivých barevných bodů (pixelů). Body jsou uspořádány do mřížky. 
        Každý bod má určen svou přesnou polohu a barvu v nějakém barevném modelu (např. RGB). Tento způsob popisu obrázků používá např. televize nebo digitální fotoaparát.</span></p>
        <button onclick="readMore(this)" class="btn" class="theory-btn">Číst dále</button>
</div>
<hr>
<div class="theory">
    <h3>Souřadnice</h3>
    <p>Soustava souřadnic (též souřadnicová soustava či systém souřadnic) umožňuje jednoznačně popsat polohu bodu pomocí čísel jakožto souřadnic čili koordinát. Geometrické úlohy je pak možno řešit <span class="dots">...</span><span class="more">matematickými prostředky, což je základ analytické geometrie. 
        Polohu bodu na přímce určuje jedno (reálné) číslo, v rovině dvě, v prostoru tři čísla atd. Obecně je k určení polohy bodu v n-rozměrném prostoru třeba n čísel, která tvoří uspořádané n-tice (čti entice), neboť na jejich pořadí záleží. 
        Polohu přímky lze pak označit pomocí dvou bodů, polohu roviny pomocí tří bodů a podobně i pro další geometrické útvary.</span></p>
        <button onclick="readMore(this)" class"btn" class="theory-btn">Číst dále</button>
</div>
.more{
    display: none;
}
function readMore(el) {
    dots = el.previousElementSibling.childNodes[1];
    more = el.previousElementSibling.childNodes[2];
    if (dots.style.display == "none") {
        dots.style.display = "inline";
        el.innerHTML = "Číst dále"
        more.style.display = "none";
    } else {
        dots.style.display = "none";
        el.innerHTML = "Zavřít"
        more.style.display = "inline";
    }
}
function readMore(el) {
    dots = el.previousElementSibling.childNodes[1];
    more = el.previousElementSibling.childNodes[2];
    if (dots.style.display == "none") {
        dots.style.display = "inline";
        el.innerHTML = "Číst dále"
        more.style.display = "none";
    } else {
        dots.style.display = "none";
        el.innerHTML = "Zavřít"
        more.style.display = "inline";
    }
}
body.dark .theory {
    /*letter-spacing: -1px;*/
    color: white;
}

body .theory {
    /*letter-spacing: -1px;*/
    /*word-spacing: -2px;*/
    color: black;
}

.theory-btn{
    
}

.more{
    display: none;
}
<div class="theory">
        <h3>Rastrová grafika</h3>
        <p>Rastrová grafika (či bitmapová grafika) je jeden ze dvou základních způsobů, jakým počítače ukládají a zpracovávají obrazové informace (druhý způsob je vektorová grafika).
            V rastrové grafice je celý obrázek <span class="dots">...</span><span class="more">popsán pomocí jednotlivých barevných bodů (pixelů). Body jsou uspořádány do mřížky. 
            Každý bod má určen svou přesnou polohu a barvu v nějakém barevném modelu (např. RGB). Tento způsob popisu obrázků používá např. televize nebo digitální fotoaparát.</span></p>
            <button onclick="readMore(this)" class="btn" class="theory-btn">Číst dále</button>
    </div>
    <hr>
    <div class="theory">
        <h3>Souřadnice</h3>
        <p>Soustava souřadnic (též souřadnicová soustava či systém souřadnic) umožňuje jednoznačně popsat polohu bodu pomocí čísel jakožto souřadnic čili koordinát. Geometrické úlohy je pak možno řešit <span class="dots">...</span><span class="more">matematickými prostředky, což je základ analytické geometrie. 
            Polohu bodu na přímce určuje jedno (reálné) číslo, v rovině dvě, v prostoru tři čísla atd. Obecně je k určení polohy bodu v n-rozměrném prostoru třeba n čísel, která tvoří uspořádané n-tice (čti entice), neboť na jejich pořadí záleží. 
            Polohu přímky lze pak označit pomocí dvou bodů, polohu roviny pomocí tří bodů a podobně i pro další geometrické útvary.</span></p>
            <button onclick="readMore(this)" class"btn" class="theory-btn">Číst dále</button>
    </div>
-----------------------
<div class="theory">
    <h3>Rastrová grafika</h3>
    <p>Rastrová grafika (či bitmapová grafika) je jeden ze dvou základních způsobů, jakým počítače ukládají a zpracovávají obrazové informace (druhý způsob je vektorová grafika).
        V rastrové grafice je celý obrázek <span class="dots">...</span><span class="more">popsán pomocí jednotlivých barevných bodů (pixelů). Body jsou uspořádány do mřížky. 
        Každý bod má určen svou přesnou polohu a barvu v nějakém barevném modelu (např. RGB). Tento způsob popisu obrázků používá např. televize nebo digitální fotoaparát.</span></p>
        <button onclick="readMore(this)" class="btn" class="theory-btn">Číst dále</button>
</div>
<hr>
<div class="theory">
    <h3>Souřadnice</h3>
    <p>Soustava souřadnic (též souřadnicová soustava či systém souřadnic) umožňuje jednoznačně popsat polohu bodu pomocí čísel jakožto souřadnic čili koordinát. Geometrické úlohy je pak možno řešit <span class="dots">...</span><span class="more">matematickými prostředky, což je základ analytické geometrie. 
        Polohu bodu na přímce určuje jedno (reálné) číslo, v rovině dvě, v prostoru tři čísla atd. Obecně je k určení polohy bodu v n-rozměrném prostoru třeba n čísel, která tvoří uspořádané n-tice (čti entice), neboť na jejich pořadí záleží. 
        Polohu přímky lze pak označit pomocí dvou bodů, polohu roviny pomocí tří bodů a podobně i pro další geometrické útvary.</span></p>
        <button onclick="readMore(this)" class"btn" class="theory-btn">Číst dále</button>
</div>
.more{
    display: none;
}
function readMore(el) {
    dots = el.previousElementSibling.childNodes[1];
    more = el.previousElementSibling.childNodes[2];
    if (dots.style.display == "none") {
        dots.style.display = "inline";
        el.innerHTML = "Číst dále"
        more.style.display = "none";
    } else {
        dots.style.display = "none";
        el.innerHTML = "Zavřít"
        more.style.display = "inline";
    }
}
function readMore(el) {
    dots = el.previousElementSibling.childNodes[1];
    more = el.previousElementSibling.childNodes[2];
    if (dots.style.display == "none") {
        dots.style.display = "inline";
        el.innerHTML = "Číst dále"
        more.style.display = "none";
    } else {
        dots.style.display = "none";
        el.innerHTML = "Zavřít"
        more.style.display = "inline";
    }
}
body.dark .theory {
    /*letter-spacing: -1px;*/
    color: white;
}

body .theory {
    /*letter-spacing: -1px;*/
    /*word-spacing: -2px;*/
    color: black;
}

.theory-btn{
    
}

.more{
    display: none;
}
<div class="theory">
        <h3>Rastrová grafika</h3>
        <p>Rastrová grafika (či bitmapová grafika) je jeden ze dvou základních způsobů, jakým počítače ukládají a zpracovávají obrazové informace (druhý způsob je vektorová grafika).
            V rastrové grafice je celý obrázek <span class="dots">...</span><span class="more">popsán pomocí jednotlivých barevných bodů (pixelů). Body jsou uspořádány do mřížky. 
            Každý bod má určen svou přesnou polohu a barvu v nějakém barevném modelu (např. RGB). Tento způsob popisu obrázků používá např. televize nebo digitální fotoaparát.</span></p>
            <button onclick="readMore(this)" class="btn" class="theory-btn">Číst dále</button>
    </div>
    <hr>
    <div class="theory">
        <h3>Souřadnice</h3>
        <p>Soustava souřadnic (též souřadnicová soustava či systém souřadnic) umožňuje jednoznačně popsat polohu bodu pomocí čísel jakožto souřadnic čili koordinát. Geometrické úlohy je pak možno řešit <span class="dots">...</span><span class="more">matematickými prostředky, což je základ analytické geometrie. 
            Polohu bodu na přímce určuje jedno (reálné) číslo, v rovině dvě, v prostoru tři čísla atd. Obecně je k určení polohy bodu v n-rozměrném prostoru třeba n čísel, která tvoří uspořádané n-tice (čti entice), neboť na jejich pořadí záleží. 
            Polohu přímky lze pak označit pomocí dvou bodů, polohu roviny pomocí tří bodů a podobně i pro další geometrické útvary.</span></p>
            <button onclick="readMore(this)" class"btn" class="theory-btn">Číst dále</button>
    </div>

Display Kivy canvas inside GridLayout

copy iconCopydownload iconDownload
Grafika:
    GridLayout:
        cols:2
        GridLayout:
            size_hint: (0.3,0.2)
            cols:1
            GridLayout:
                cols:2
                Label:
                    text:"no"
                TextInput:
                    text: "50"
                Label:
                    text:"rbr"
                TextInput:
                    text: "100"
            Button:
                text:"calc"
        canvas:
            Color:
                rbg:1, 1, 1, 1
            Rectangle:
                pos:self.pos
                size:self.size
Grafika:
    GridLayout:
        cols:2
        canvas:
            Color:
                rbg:1, 1, 1, 1
            Rectangle:
                pos:self.pos
                size:self.size
        GridLayout:
            size_hint: (0.3,0.2)
            cols:1
            GridLayout:
                cols:2
                Label:
                    text:"no"
                TextInput:
                    text: "50"
                Label:
                    text:"rbr"
                TextInput:
                    text: "100"
            Button:
                text:"calc"
-----------------------
Grafika:
    GridLayout:
        cols:2
        GridLayout:
            size_hint: (0.3,0.2)
            cols:1
            GridLayout:
                cols:2
                Label:
                    text:"no"
                TextInput:
                    text: "50"
                Label:
                    text:"rbr"
                TextInput:
                    text: "100"
            Button:
                text:"calc"
        canvas:
            Color:
                rbg:1, 1, 1, 1
            Rectangle:
                pos:self.pos
                size:self.size
Grafika:
    GridLayout:
        cols:2
        canvas:
            Color:
                rbg:1, 1, 1, 1
            Rectangle:
                pos:self.pos
                size:self.size
        GridLayout:
            size_hint: (0.3,0.2)
            cols:1
            GridLayout:
                cols:2
                Label:
                    text:"no"
                TextInput:
                    text: "50"
                Label:
                    text:"rbr"
                TextInput:
                    text: "100"
            Button:
                text:"calc"

Wrong floating images

copy iconCopydownload iconDownload
    <h1>Vítej v Kasiho světě!</h1>
<p>Má nabídka toho, co umím, zvládám, čemu se věnuji a co chci šířit do světa. Stejně tak chci získávat zkušenosti další i úplně nové. Pojď se tady porozhlédnout a třeba se mi ozveš a navážeme spolupráci.</p>


<div class="hover14 column">
  <div><a href="http://kasihosvet.g6.cz/o-mne/">
    <figure><img src="http://kasihosvet.g6.cz/wp-content/uploads/2020/03/o-mne.png" /></figure></a></div>
    <div><a href="http://kasihosvet.g6.cz/trener-parkouru/">
      <figure><img src="http://kasihosvet.g6.cz/wp-content/uploads/2020/03/parkour.png" /></figure></a></div>
      <div>
        <figure><img src="http://kasihosvet.g6.cz/wp-content/uploads/2020/03/videoedit.png" /></figure></a>
      </div>
      <div><figure><img src="http://kasihosvet.g6.cz/wp-content/uploads/2020/03/webkamekr.png" /></figure></a></div>
      <div><figure><img src="http://kasihosvet.g6.cz/wp-content/uploads/2020/03/grafika.png"/></figure></a></div>
      <div><figure><img src="http://kasihosvet.g6.cz/wp-content/uploads/2020/03/kontakt.png" /></figure></a></div>
    </div>
body {
  color: #333;
  font-family: "Open Sans", sans-serif;
  font-weight: 300;
}

.column {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

figure {
  width: 400px;
  height: 250px;
  margin-left: 10px;
  margin-right: 10px;
  padding: 0;
  background: #fff;
  overflow: hidden;
  float: left;
}
figure:hover + span {
  bottom: -36px;
  opacity: 1;
}

/* Shine */
.hover14 figure {
  position: relative;
}
.hover14 figure::before {
  position: absolute;
  top: 0;
  left: -75%;
  z-index: 2;
  display: block;
  content: "";
  width: 50%;
  height: 100%;
  background: -webkit-linear-gradient(
    left,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.3) 100%
  );
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.3) 100%
  );
  -webkit-transform: skewX(-25deg);
  transform: skewX(-25deg);
}
.hover14 figure:hover::before {
  -webkit-animation: shine 0.75s;
  animation: shine 0.75s;
}
@-webkit-keyframes shine {
  100% {
    left: 125%;
  }
}
@keyframes shine {
  100% {
    left: 125%;
  }
}

@media (max-width: 750px) {
  .column {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
  }
}
-----------------------
    <h1>Vítej v Kasiho světě!</h1>
<p>Má nabídka toho, co umím, zvládám, čemu se věnuji a co chci šířit do světa. Stejně tak chci získávat zkušenosti další i úplně nové. Pojď se tady porozhlédnout a třeba se mi ozveš a navážeme spolupráci.</p>


<div class="hover14 column">
  <div><a href="http://kasihosvet.g6.cz/o-mne/">
    <figure><img src="http://kasihosvet.g6.cz/wp-content/uploads/2020/03/o-mne.png" /></figure></a></div>
    <div><a href="http://kasihosvet.g6.cz/trener-parkouru/">
      <figure><img src="http://kasihosvet.g6.cz/wp-content/uploads/2020/03/parkour.png" /></figure></a></div>
      <div>
        <figure><img src="http://kasihosvet.g6.cz/wp-content/uploads/2020/03/videoedit.png" /></figure></a>
      </div>
      <div><figure><img src="http://kasihosvet.g6.cz/wp-content/uploads/2020/03/webkamekr.png" /></figure></a></div>
      <div><figure><img src="http://kasihosvet.g6.cz/wp-content/uploads/2020/03/grafika.png"/></figure></a></div>
      <div><figure><img src="http://kasihosvet.g6.cz/wp-content/uploads/2020/03/kontakt.png" /></figure></a></div>
    </div>
body {
  color: #333;
  font-family: "Open Sans", sans-serif;
  font-weight: 300;
}

.column {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

figure {
  width: 400px;
  height: 250px;
  margin-left: 10px;
  margin-right: 10px;
  padding: 0;
  background: #fff;
  overflow: hidden;
  float: left;
}
figure:hover + span {
  bottom: -36px;
  opacity: 1;
}

/* Shine */
.hover14 figure {
  position: relative;
}
.hover14 figure::before {
  position: absolute;
  top: 0;
  left: -75%;
  z-index: 2;
  display: block;
  content: "";
  width: 50%;
  height: 100%;
  background: -webkit-linear-gradient(
    left,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.3) 100%
  );
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.3) 100%
  );
  -webkit-transform: skewX(-25deg);
  transform: skewX(-25deg);
}
.hover14 figure:hover::before {
  -webkit-animation: shine 0.75s;
  animation: shine 0.75s;
}
@-webkit-keyframes shine {
  100% {
    left: 125%;
  }
}
@keyframes shine {
  100% {
    left: 125%;
  }
}

@media (max-width: 750px) {
  .column {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
  }
}

Java login with MySQL database

copy iconCopydownload iconDownload
"SELECT * FROM users_db.users WHERE 'username' = ? and 'password' = ?"
"SELECT * FROM users_db.users WHERE username = ? AND password = ?"
-----------------------
"SELECT * FROM users_db.users WHERE 'username' = ? and 'password' = ?"
"SELECT * FROM users_db.users WHERE username = ? AND password = ?"

Camera2 OpenGL random glitches in video caused by Matrix.rotateM

copy iconCopydownload iconDownload
Matrix.setIndentityM(transform, m);
if (AppSetting.getValue(activity, Config.ORIENTATION, "").equalsIgnoreCase("Portrait")) {
    Matrix.rotateM(mTmpMatrix, 0, 270, 0, 0, 1);
    Matrix.translateM(mTmpMatrix, 0, -1, 0, 0);
}
-----------------------
Matrix.setIndentityM(transform, m);
if (AppSetting.getValue(activity, Config.ORIENTATION, "").equalsIgnoreCase("Portrait")) {
    Matrix.rotateM(mTmpMatrix, 0, 270, 0, 0, 1);
    Matrix.translateM(mTmpMatrix, 0, -1, 0, 0);
}

How to make 2 navs overlap using css

copy iconCopydownload iconDownload
header {
  font-size: 10px;
  letter-spacing: 1.025px;
  background-color: black;
  padding: 1em;
  position: relative;
}

header>nav:nth-child(1) {
  position: absolute;
  top: 1em;
  right: 1em;
  bottom: 1em;
  background-color: red;
  padding: 1em 1em 1em 1em;
}

header nav {
  color: white;
  text-align: center;
}

header nav ul {
  list-style: none;
  display: inline-block;
  position: relative;
  padding: 0;
}

header nav ul li {
  display: inline;
  padding-left: 1em;
  padding-right: 1em;
}
<header>
  <nav>
    <a href="">MAGYAR</a> |
    <a href="">ENGLISH</a>
  </nav>
  <nav>
    <ul>
      <li><a href="index.html">RÓLAM</a></li>
      <li><a href="music.html">ZENE</a></li>
      <li><a href="design.html">GRAFIKA</a></li>
      <li><a href="gamedev.html">JÁTÉKFEJLESZTÉS</a></li>
    </ul>
  </nav>
</header>
-----------------------
header {
  font-size: 10px;
  letter-spacing: 1.025px;
  background-color: black;
  padding: 1em;
  position: relative;
}

header>nav:nth-child(1) {
  position: absolute;
  top: 1em;
  right: 1em;
  bottom: 1em;
  background-color: red;
  padding: 1em 1em 1em 1em;
}

header nav {
  color: white;
  text-align: center;
}

header nav ul {
  list-style: none;
  display: inline-block;
  position: relative;
  padding: 0;
}

header nav ul li {
  display: inline;
  padding-left: 1em;
  padding-right: 1em;
}
<header>
  <nav>
    <a href="">MAGYAR</a> |
    <a href="">ENGLISH</a>
  </nav>
  <nav>
    <ul>
      <li><a href="index.html">RÓLAM</a></li>
      <li><a href="music.html">ZENE</a></li>
      <li><a href="design.html">GRAFIKA</a></li>
      <li><a href="gamedev.html">JÁTÉKFEJLESZTÉS</a></li>
    </ul>
  </nav>
</header>

Is there any fast alternatives for TextureView.getBitmap() function?

copy iconCopydownload iconDownload
implementation group: 'org.bytedeco', name: 'javacv-platform', version: '1.4.3'
implementation group: 'org.bytedeco', name: 'javacv', version: '1.4.3'
class Player extends AsyncTask<BitmapRenderer, Bitmap, Object> {
    BitmapRenderer glRenderer;
    FFmpegFrameGrabber grabber = null;

    @Override
    protected Bitmap doInBackground(BitmapRenderer... objects) {
        glRenderer = objects[0];

        try {
            grabber = new FFmpegFrameGrabber("/storage/emulated/0/Download/test.mp4");
            grabber.start();
            OpenCVFrameConverter.ToMat converter = new OpenCVFrameConverter.ToMat();
            Frame grabbedImage;
            while ((grabbedImage = grabber.grabImage()) != null) {
                Log.e("Android", "Frame Grabbed " + grabbedImage.imageWidth + "x" + grabbedImage.imageHeight);
                AndroidFrameConverter frameConverter = new AndroidFrameConverter();
                Bitmap bitmap = frameConverter.convert(grabbedImage);
                publishProgress(bitmap);

                opencv_core.Mat grabbedMat = converter.convert(grabbedImage);
                if (grabbedMat != null)
                    imwrite("/storage/emulated/0/Download/videoplayback.jpg", grabbedMat);
            }

        } catch (FrameGrabber.Exception e) {
            e.printStackTrace();
            Log.e("Android", e.getMessage(), e);
        }
        return null;
    }

    @Override
    protected void onProgressUpdate(Bitmap... values) {
        super.onProgressUpdate(values);
        glRenderer.draw(values[0]);
    }

    @Override
    protected void onPostExecute(Object objects) {
        super.onPostExecute(objects);
        try {
            grabber.stop();
            grabber.release();
        } catch (FrameGrabber.Exception e1) {
        }
    }
}
package com.example.gphspc.javacvtest;

import android.graphics.Bitmap;
import android.opengl.GLSurfaceView;
import android.opengl.GLUtils;
import android.view.ViewGroup;

import java.nio.Buffer;
import java.nio.ByteBuffer;
import java.nio.ByteOrder;

import javax.microedition.khronos.egl.EGLConfig;
import javax.microedition.khronos.opengles.GL10;

public class BitmapRenderer implements GLSurfaceView.Renderer {

    private int[] textures;
    private Bitmap bitmap;
    private GLSurfaceView glSurfaceView;
    private int parentWidth, parentHeight;
    private boolean sizeModified = false;

    public BitmapRenderer(GLSurfaceView glSurfaceView) {
        this.glSurfaceView = glSurfaceView;
        this.glSurfaceView.setEGLContextClientVersion(1);
        this.glSurfaceView.setRenderer(this);
        this.glSurfaceView.setRenderMode(GLSurfaceView.RENDERMODE_WHEN_DIRTY);
    }

    private static final float[] VERTEX_COORDINATES = new float[]{
            -1.0f, +1.0f, 0.0f,
            +1.0f, +1.0f, 0.0f,
            -1.0f, -1.0f, 0.0f,
            +1.0f, -1.0f, 0.0f
    };

    private static final float[] TEXTURE_COORDINATES = new float[]{
            0.0f, 0.0f,
            1.0f, 0.0f,
            0.0f, 1.0f,
            1.0f, 1.0f
    };

    private static final Buffer TEXCOORD_BUFFER = ByteBuffer.allocateDirect(TEXTURE_COORDINATES.length * 4)
            .order(ByteOrder.nativeOrder()).asFloatBuffer().put(TEXTURE_COORDINATES).rewind();
    private static final Buffer VERTEX_BUFFER = ByteBuffer.allocateDirect(VERTEX_COORDINATES.length * 4)
            .order(ByteOrder.nativeOrder()).asFloatBuffer().put(VERTEX_COORDINATES).rewind();

    public void draw(Bitmap bitmap) {
        if (bitmap == null)
            return;

        this.bitmap = bitmap;

        if (!sizeModified) {
            ViewGroup.LayoutParams layoutParams = glSurfaceView.getLayoutParams();
            Dimension newDims = getRelativeSize(new Dimension(bitmap.getWidth(), bitmap.getHeight()), glSurfaceView.getWidth(), glSurfaceView.getHeight());
            layoutParams.width = newDims.getWidth();
            layoutParams.height = newDims.getHeight();
            glSurfaceView.setLayoutParams(layoutParams);
            sizeModified = true;
        }

        glSurfaceView.requestRender();
    }

    public static Dimension getRelativeSize(Dimension dimension, int width, int height) {
        int toWidth = width, toHeight = height;

        int imgWidth = (int) dimension.getWidth();
        int imgHeight = (int) dimension.getHeight();

        if (imgWidth > imgHeight) {
            toWidth = (int) ((double) height / ((double) imgHeight / imgWidth));
            if (toWidth > width)
                toWidth = width;
            toHeight = (int) (toWidth * ((double) imgHeight / imgWidth));
        } else if (imgWidth < imgHeight) {
            toHeight = (int) ((double) width / ((double) imgWidth / imgHeight));
            if (toHeight > height)
                toHeight = height;
            toWidth = (int) (toHeight * ((double) imgWidth / imgHeight));
        }

        return new Dimension(toWidth, toHeight);
    }

    @Override
    public void onSurfaceCreated(GL10 gl, EGLConfig config) {
        textures = new int[1];
        gl.glEnable(GL10.GL_TEXTURE_2D);
        gl.glEnableClientState(GL10.GL_VERTEX_ARRAY);
        gl.glEnableClientState(GL10.GL_TEXTURE_COORD_ARRAY);

        ViewGroup.LayoutParams layoutParams = glSurfaceView.getLayoutParams();
        parentWidth = layoutParams.width;
        parentHeight = layoutParams.height;
    }

    @Override
    public void onSurfaceChanged(GL10 gl, int width, int height) {
        gl.glViewport(0, 0, width, height);
//        gl.glOrthof(0f, width, 0f, height, -1f, 1f);
    }

    @Override
    public void onDrawFrame(GL10 gl) {
        if (bitmap != null) {

            gl.glGenTextures(1, textures, 0);
            gl.glBindTexture(GL10.GL_TEXTURE_2D, textures[0]);

            gl.glTexParameterf(GL10.GL_TEXTURE_2D, GL10.GL_TEXTURE_MAG_FILTER, GL10.GL_LINEAR);
            gl.glTexParameterf(GL10.GL_TEXTURE_2D, GL10.GL_TEXTURE_MIN_FILTER, GL10.GL_LINEAR);
            gl.glTexParameterf(GL10.GL_TEXTURE_2D, GL10.GL_TEXTURE_WRAP_S, GL10.GL_CLAMP_TO_EDGE);
            gl.glTexParameterf(GL10.GL_TEXTURE_2D, GL10.GL_TEXTURE_WRAP_T, GL10.GL_CLAMP_TO_EDGE);

            GLUtils.texImage2D(GL10.GL_TEXTURE_2D, 0, bitmap, 0);

            gl.glActiveTexture(GL10.GL_TEXTURE0);
            gl.glBindTexture(GL10.GL_TEXTURE_2D, textures[0]);

            gl.glVertexPointer(3, GL10.GL_FLOAT, 0, VERTEX_BUFFER);
            gl.glTexCoordPointer(2, GL10.GL_FLOAT, 0, TEXCOORD_BUFFER);
            gl.glDrawArrays(GL10.GL_TRIANGLE_STRIP, 0, 4);
        }
    }
}

class Dimension {
    int width = 0, height = 0;

    public Dimension(int width, int height) {
        this.width = width;
        this.height = height;
    }

    public int getWidth() {
        return width;
    }

    public void setWidth(int width) {
        this.width = width;
    }

    public int getHeight() {
        return height;
    }

    public void setHeight(int height) {
        this.height = height;
    }
}
-----------------------
implementation group: 'org.bytedeco', name: 'javacv-platform', version: '1.4.3'
implementation group: 'org.bytedeco', name: 'javacv', version: '1.4.3'
class Player extends AsyncTask<BitmapRenderer, Bitmap, Object> {
    BitmapRenderer glRenderer;
    FFmpegFrameGrabber grabber = null;

    @Override
    protected Bitmap doInBackground(BitmapRenderer... objects) {
        glRenderer = objects[0];

        try {
            grabber = new FFmpegFrameGrabber("/storage/emulated/0/Download/test.mp4");
            grabber.start();
            OpenCVFrameConverter.ToMat converter = new OpenCVFrameConverter.ToMat();
            Frame grabbedImage;
            while ((grabbedImage = grabber.grabImage()) != null) {
                Log.e("Android", "Frame Grabbed " + grabbedImage.imageWidth + "x" + grabbedImage.imageHeight);
                AndroidFrameConverter frameConverter = new AndroidFrameConverter();
                Bitmap bitmap = frameConverter.convert(grabbedImage);
                publishProgress(bitmap);

                opencv_core.Mat grabbedMat = converter.convert(grabbedImage);
                if (grabbedMat != null)
                    imwrite("/storage/emulated/0/Download/videoplayback.jpg", grabbedMat);
            }

        } catch (FrameGrabber.Exception e) {
            e.printStackTrace();
            Log.e("Android", e.getMessage(), e);
        }
        return null;
    }

    @Override
    protected void onProgressUpdate(Bitmap... values) {
        super.onProgressUpdate(values);
        glRenderer.draw(values[0]);
    }

    @Override
    protected void onPostExecute(Object objects) {
        super.onPostExecute(objects);
        try {
            grabber.stop();
            grabber.release();
        } catch (FrameGrabber.Exception e1) {
        }
    }
}
package com.example.gphspc.javacvtest;

import android.graphics.Bitmap;
import android.opengl.GLSurfaceView;
import android.opengl.GLUtils;
import android.view.ViewGroup;

import java.nio.Buffer;
import java.nio.ByteBuffer;
import java.nio.ByteOrder;

import javax.microedition.khronos.egl.EGLConfig;
import javax.microedition.khronos.opengles.GL10;

public class BitmapRenderer implements GLSurfaceView.Renderer {

    private int[] textures;
    private Bitmap bitmap;
    private GLSurfaceView glSurfaceView;
    private int parentWidth, parentHeight;
    private boolean sizeModified = false;

    public BitmapRenderer(GLSurfaceView glSurfaceView) {
        this.glSurfaceView = glSurfaceView;
        this.glSurfaceView.setEGLContextClientVersion(1);
        this.glSurfaceView.setRenderer(this);
        this.glSurfaceView.setRenderMode(GLSurfaceView.RENDERMODE_WHEN_DIRTY);
    }

    private static final float[] VERTEX_COORDINATES = new float[]{
            -1.0f, +1.0f, 0.0f,
            +1.0f, +1.0f, 0.0f,
            -1.0f, -1.0f, 0.0f,
            +1.0f, -1.0f, 0.0f
    };

    private static final float[] TEXTURE_COORDINATES = new float[]{
            0.0f, 0.0f,
            1.0f, 0.0f,
            0.0f, 1.0f,
            1.0f, 1.0f
    };

    private static final Buffer TEXCOORD_BUFFER = ByteBuffer.allocateDirect(TEXTURE_COORDINATES.length * 4)
            .order(ByteOrder.nativeOrder()).asFloatBuffer().put(TEXTURE_COORDINATES).rewind();
    private static final Buffer VERTEX_BUFFER = ByteBuffer.allocateDirect(VERTEX_COORDINATES.length * 4)
            .order(ByteOrder.nativeOrder()).asFloatBuffer().put(VERTEX_COORDINATES).rewind();

    public void draw(Bitmap bitmap) {
        if (bitmap == null)
            return;

        this.bitmap = bitmap;

        if (!sizeModified) {
            ViewGroup.LayoutParams layoutParams = glSurfaceView.getLayoutParams();
            Dimension newDims = getRelativeSize(new Dimension(bitmap.getWidth(), bitmap.getHeight()), glSurfaceView.getWidth(), glSurfaceView.getHeight());
            layoutParams.width = newDims.getWidth();
            layoutParams.height = newDims.getHeight();
            glSurfaceView.setLayoutParams(layoutParams);
            sizeModified = true;
        }

        glSurfaceView.requestRender();
    }

    public static Dimension getRelativeSize(Dimension dimension, int width, int height) {
        int toWidth = width, toHeight = height;

        int imgWidth = (int) dimension.getWidth();
        int imgHeight = (int) dimension.getHeight();

        if (imgWidth > imgHeight) {
            toWidth = (int) ((double) height / ((double) imgHeight / imgWidth));
            if (toWidth > width)
                toWidth = width;
            toHeight = (int) (toWidth * ((double) imgHeight / imgWidth));
        } else if (imgWidth < imgHeight) {
            toHeight = (int) ((double) width / ((double) imgWidth / imgHeight));
            if (toHeight > height)
                toHeight = height;
            toWidth = (int) (toHeight * ((double) imgWidth / imgHeight));
        }

        return new Dimension(toWidth, toHeight);
    }

    @Override
    public void onSurfaceCreated(GL10 gl, EGLConfig config) {
        textures = new int[1];
        gl.glEnable(GL10.GL_TEXTURE_2D);
        gl.glEnableClientState(GL10.GL_VERTEX_ARRAY);
        gl.glEnableClientState(GL10.GL_TEXTURE_COORD_ARRAY);

        ViewGroup.LayoutParams layoutParams = glSurfaceView.getLayoutParams();
        parentWidth = layoutParams.width;
        parentHeight = layoutParams.height;
    }

    @Override
    public void onSurfaceChanged(GL10 gl, int width, int height) {
        gl.glViewport(0, 0, width, height);
//        gl.glOrthof(0f, width, 0f, height, -1f, 1f);
    }

    @Override
    public void onDrawFrame(GL10 gl) {
        if (bitmap != null) {

            gl.glGenTextures(1, textures, 0);
            gl.glBindTexture(GL10.GL_TEXTURE_2D, textures[0]);

            gl.glTexParameterf(GL10.GL_TEXTURE_2D, GL10.GL_TEXTURE_MAG_FILTER, GL10.GL_LINEAR);
            gl.glTexParameterf(GL10.GL_TEXTURE_2D, GL10.GL_TEXTURE_MIN_FILTER, GL10.GL_LINEAR);
            gl.glTexParameterf(GL10.GL_TEXTURE_2D, GL10.GL_TEXTURE_WRAP_S, GL10.GL_CLAMP_TO_EDGE);
            gl.glTexParameterf(GL10.GL_TEXTURE_2D, GL10.GL_TEXTURE_WRAP_T, GL10.GL_CLAMP_TO_EDGE);

            GLUtils.texImage2D(GL10.GL_TEXTURE_2D, 0, bitmap, 0);

            gl.glActiveTexture(GL10.GL_TEXTURE0);
            gl.glBindTexture(GL10.GL_TEXTURE_2D, textures[0]);

            gl.glVertexPointer(3, GL10.GL_FLOAT, 0, VERTEX_BUFFER);
            gl.glTexCoordPointer(2, GL10.GL_FLOAT, 0, TEXCOORD_BUFFER);
            gl.glDrawArrays(GL10.GL_TRIANGLE_STRIP, 0, 4);
        }
    }
}

class Dimension {
    int width = 0, height = 0;

    public Dimension(int width, int height) {
        this.width = width;
        this.height = height;
    }

    public int getWidth() {
        return width;
    }

    public void setWidth(int width) {
        this.width = width;
    }

    public int getHeight() {
        return height;
    }

    public void setHeight(int height) {
        this.height = height;
    }
}
-----------------------
implementation group: 'org.bytedeco', name: 'javacv-platform', version: '1.4.3'
implementation group: 'org.bytedeco', name: 'javacv', version: '1.4.3'
class Player extends AsyncTask<BitmapRenderer, Bitmap, Object> {
    BitmapRenderer glRenderer;
    FFmpegFrameGrabber grabber = null;

    @Override
    protected Bitmap doInBackground(BitmapRenderer... objects) {
        glRenderer = objects[0];

        try {
            grabber = new FFmpegFrameGrabber("/storage/emulated/0/Download/test.mp4");
            grabber.start();
            OpenCVFrameConverter.ToMat converter = new OpenCVFrameConverter.ToMat();
            Frame grabbedImage;
            while ((grabbedImage = grabber.grabImage()) != null) {
                Log.e("Android", "Frame Grabbed " + grabbedImage.imageWidth + "x" + grabbedImage.imageHeight);
                AndroidFrameConverter frameConverter = new AndroidFrameConverter();
                Bitmap bitmap = frameConverter.convert(grabbedImage);
                publishProgress(bitmap);

                opencv_core.Mat grabbedMat = converter.convert(grabbedImage);
                if (grabbedMat != null)
                    imwrite("/storage/emulated/0/Download/videoplayback.jpg", grabbedMat);
            }

        } catch (FrameGrabber.Exception e) {
            e.printStackTrace();
            Log.e("Android", e.getMessage(), e);
        }
        return null;
    }

    @Override
    protected void onProgressUpdate(Bitmap... values) {
        super.onProgressUpdate(values);
        glRenderer.draw(values[0]);
    }

    @Override
    protected void onPostExecute(Object objects) {
        super.onPostExecute(objects);
        try {
            grabber.stop();
            grabber.release();
        } catch (FrameGrabber.Exception e1) {
        }
    }
}
package com.example.gphspc.javacvtest;

import android.graphics.Bitmap;
import android.opengl.GLSurfaceView;
import android.opengl.GLUtils;
import android.view.ViewGroup;

import java.nio.Buffer;
import java.nio.ByteBuffer;
import java.nio.ByteOrder;

import javax.microedition.khronos.egl.EGLConfig;
import javax.microedition.khronos.opengles.GL10;

public class BitmapRenderer implements GLSurfaceView.Renderer {

    private int[] textures;
    private Bitmap bitmap;
    private GLSurfaceView glSurfaceView;
    private int parentWidth, parentHeight;
    private boolean sizeModified = false;

    public BitmapRenderer(GLSurfaceView glSurfaceView) {
        this.glSurfaceView = glSurfaceView;
        this.glSurfaceView.setEGLContextClientVersion(1);
        this.glSurfaceView.setRenderer(this);
        this.glSurfaceView.setRenderMode(GLSurfaceView.RENDERMODE_WHEN_DIRTY);
    }

    private static final float[] VERTEX_COORDINATES = new float[]{
            -1.0f, +1.0f, 0.0f,
            +1.0f, +1.0f, 0.0f,
            -1.0f, -1.0f, 0.0f,
            +1.0f, -1.0f, 0.0f
    };

    private static final float[] TEXTURE_COORDINATES = new float[]{
            0.0f, 0.0f,
            1.0f, 0.0f,
            0.0f, 1.0f,
            1.0f, 1.0f
    };

    private static final Buffer TEXCOORD_BUFFER = ByteBuffer.allocateDirect(TEXTURE_COORDINATES.length * 4)
            .order(ByteOrder.nativeOrder()).asFloatBuffer().put(TEXTURE_COORDINATES).rewind();
    private static final Buffer VERTEX_BUFFER = ByteBuffer.allocateDirect(VERTEX_COORDINATES.length * 4)
            .order(ByteOrder.nativeOrder()).asFloatBuffer().put(VERTEX_COORDINATES).rewind();

    public void draw(Bitmap bitmap) {
        if (bitmap == null)
            return;

        this.bitmap = bitmap;

        if (!sizeModified) {
            ViewGroup.LayoutParams layoutParams = glSurfaceView.getLayoutParams();
            Dimension newDims = getRelativeSize(new Dimension(bitmap.getWidth(), bitmap.getHeight()), glSurfaceView.getWidth(), glSurfaceView.getHeight());
            layoutParams.width = newDims.getWidth();
            layoutParams.height = newDims.getHeight();
            glSurfaceView.setLayoutParams(layoutParams);
            sizeModified = true;
        }

        glSurfaceView.requestRender();
    }

    public static Dimension getRelativeSize(Dimension dimension, int width, int height) {
        int toWidth = width, toHeight = height;

        int imgWidth = (int) dimension.getWidth();
        int imgHeight = (int) dimension.getHeight();

        if (imgWidth > imgHeight) {
            toWidth = (int) ((double) height / ((double) imgHeight / imgWidth));
            if (toWidth > width)
                toWidth = width;
            toHeight = (int) (toWidth * ((double) imgHeight / imgWidth));
        } else if (imgWidth < imgHeight) {
            toHeight = (int) ((double) width / ((double) imgWidth / imgHeight));
            if (toHeight > height)
                toHeight = height;
            toWidth = (int) (toHeight * ((double) imgWidth / imgHeight));
        }

        return new Dimension(toWidth, toHeight);
    }

    @Override
    public void onSurfaceCreated(GL10 gl, EGLConfig config) {
        textures = new int[1];
        gl.glEnable(GL10.GL_TEXTURE_2D);
        gl.glEnableClientState(GL10.GL_VERTEX_ARRAY);
        gl.glEnableClientState(GL10.GL_TEXTURE_COORD_ARRAY);

        ViewGroup.LayoutParams layoutParams = glSurfaceView.getLayoutParams();
        parentWidth = layoutParams.width;
        parentHeight = layoutParams.height;
    }

    @Override
    public void onSurfaceChanged(GL10 gl, int width, int height) {
        gl.glViewport(0, 0, width, height);
//        gl.glOrthof(0f, width, 0f, height, -1f, 1f);
    }

    @Override
    public void onDrawFrame(GL10 gl) {
        if (bitmap != null) {

            gl.glGenTextures(1, textures, 0);
            gl.glBindTexture(GL10.GL_TEXTURE_2D, textures[0]);

            gl.glTexParameterf(GL10.GL_TEXTURE_2D, GL10.GL_TEXTURE_MAG_FILTER, GL10.GL_LINEAR);
            gl.glTexParameterf(GL10.GL_TEXTURE_2D, GL10.GL_TEXTURE_MIN_FILTER, GL10.GL_LINEAR);
            gl.glTexParameterf(GL10.GL_TEXTURE_2D, GL10.GL_TEXTURE_WRAP_S, GL10.GL_CLAMP_TO_EDGE);
            gl.glTexParameterf(GL10.GL_TEXTURE_2D, GL10.GL_TEXTURE_WRAP_T, GL10.GL_CLAMP_TO_EDGE);

            GLUtils.texImage2D(GL10.GL_TEXTURE_2D, 0, bitmap, 0);

            gl.glActiveTexture(GL10.GL_TEXTURE0);
            gl.glBindTexture(GL10.GL_TEXTURE_2D, textures[0]);

            gl.glVertexPointer(3, GL10.GL_FLOAT, 0, VERTEX_BUFFER);
            gl.glTexCoordPointer(2, GL10.GL_FLOAT, 0, TEXCOORD_BUFFER);
            gl.glDrawArrays(GL10.GL_TRIANGLE_STRIP, 0, 4);
        }
    }
}

class Dimension {
    int width = 0, height = 0;

    public Dimension(int width, int height) {
        this.width = width;
        this.height = height;
    }

    public int getWidth() {
        return width;
    }

    public void setWidth(int width) {
        this.width = width;
    }

    public int getHeight() {
        return height;
    }

    public void setHeight(int height) {
        this.height = height;
    }
}

eglSwapBuffers fails with EGL_BAD_SURFACE when using a Surface from MediaCodec

copy iconCopydownload iconDownload
    @Override
    public javax.microedition.khronos.egl.EGLContext createContext(EGL10 egl10, javax.microedition.khronos.egl.EGLDisplay eglDisplay, javax.microedition.khronos.egl.EGLConfig eglConfig) {
        EGLContext context = createContext();
        boolean success = EGL14.eglMakeCurrent(mBaseEGLDisplay, EGL14.EGL_NO_SURFACE, EGL14.EGL_NO_SURFACE, context);

        if (!success) {
            int error = EGL14.eglGetError();
            Log.w(TAG, "Failed to create a context. Error: " + error);
        }

        javax.microedition.khronos.egl.EGLContext egl14Context = egl10.eglGetCurrentContext(); //get an EGL10 context representation of our EGL14 context
        javax.microedition.khronos.egl.EGLContext trueEGL10Context = egl10.eglCreateContext(eglDisplay, eglConfig, egl14Context, glAttributeList);

        destroyContext(context);
        return trueEGL10Context;
    }

Community Discussions

Trending Discussions on grafika
  • Unwanted transition delay on header
  • How do I check two options at once in the option quiz?
  • How do I cancel the tracking of two or more functions on the buttons at once?
  • MediaRecorder Surface Input with OpenGL - issue if audio recording is enabled
  • Android: Camera2 - Reducing delay between video chunks/segments during continuous video recording
  • Display Kivy canvas inside GridLayout
  • Wrong floating images
  • Java login with MySQL database
  • Camera2 OpenGL random glitches in video caused by Matrix.rotateM
  • How to download picture via VBA directly in excel?
Trending Discussions on grafika

QUESTION

Unwanted transition delay on header

Asked 2021-May-16 at 17:29

I'm having a weird transition delay. When the person is scrolling the screen down for 70px or more the navbar is sliding in from "top: -100%;" to "top: 0;" but it's doing it with 1s delay. I don't know how to erase it...

To catch the navbar I used document.getElementById.

Here is my html:

<header id="header">
<div class="header-container">
    <div class="header-downbar">
        <div class="header-downbar-content">    
            <div class="header-logo">
                <div class="header-logo-container"> 
                    <a href="index.php"><img src="grafika/Fenix-logo-white.png" alt=""></a>
                </div>
            </div>
            <div class="header-navbar">
                <nav>
                    <ul>
                        <a href=""><li><p class="link">XXXX</p></li></a>
                        <a href=""><li><p class="link">XXXX</p></li></a>
                        <a href=""><li><p class="link">XXXX</p></li></a>
                        <a href=""><li><p class="link">XXXX</p></li></a>
                    </ul>
                </nav>
            </div>
        </div>
    </div>
</div>
</header>

Here is my CSS for header:

<style>
 header {
 z-index: 3;
 width: 100%;
 position: fixed;
 top: -100%;
 transition-delay: 0s;
 transition: 0.6s;
 }
</style>

and here is my JS:

<script type="text/javascript">

const header = document.getElementById("header");

window.onscroll = function() {
    slideInHeader();
}

function slideInHeader() {
    if(document.body.scrollTop > 70 || document.documentElement.scrollTop > 70) {
        header.style.top = "0";
    }
    else {
        header.style.top = "-100%";
    }
}

</script>

ANSWER

Answered 2021-May-16 at 17:29

I didn't see any delay, however 100% means 100% of the total scrolling height, which will create inconsistent animation speed, depending on the size of the content on the page.

This approach uses menu height itself to hide it:

const header = document.getElementById("header"),
      _top = -header.getBoundingClientRect().height + "px";

header.style.top = _top;
window.onscroll = function() {
  slideInHeader();
}

function slideInHeader() {
  if (document.body.scrollTop > 70 || document.documentElement.scrollTop > 70) {
    header.style.top = "0";
  } else {
    header.style.top = _top;
  }
}
html,
body {
  height: 300%;
}

header {
  z-index: 3;
  width: 100%;
  position: fixed;
  top: -100%;
  transition-delay: 0s;
  transition: 0.6s;
}
<header id="header">
  <div class="header-container">
    <div class="header-downbar">
      <div class="header-downbar-content">
        <div class="header-logo">
          <div class="header-logo-container">
            <a href="index.php"><img src="grafika/Fenix-logo-white.png" alt=""></a>
          </div>
        </div>
        <div class="header-navbar">
          <nav>
            <ul>
              <a href="">
                <li>
                  <p class="link">XXXX</p>
                </li>
              </a>
              <a href="">
                <li>
                  <p class="link">XXXX</p>
                </li>
              </a>
              <a href="">
                <li>
                  <p class="link">XXXX</p>
                </li>
              </a>
              <a href="">
                <li>
                  <p class="link">XXXX</p>
                </li>
              </a>
            </ul>
          </nav>
        </div>
      </div>
    </div>
  </div>
</header>

Source https://stackoverflow.com/questions/67558628

Community Discussions, Code Snippets contain sources that include Stack Exchange Network

Vulnerabilities

No vulnerabilities reported

Install grafika

You can download it from GitHub.
You can use grafika like any standard Java library. Please include the the jar files in your classpath. You can also use any IDE and you can run and debug the grafika component as you would do with any other Java program. Best practice is to use a build tool that supports dependency management such as Maven or Gradle. For Maven installation, please refer maven.apache.org. For Gradle installation, please refer gradle.org .

Support

For any new features, suggestions and bugs create an issue on GitHub. If you have any questions check and ask questions on community page Stack Overflow .

DOWNLOAD this Library from

Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from
over 430 million Knowledge Items
Find more libraries
Reuse Solution Kits and Libraries Curated by Popular Use Cases

Save this library and start creating your kit

Explore Related Topics

Share this Page

share link
Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from
over 430 million Knowledge Items
Find more libraries
Reuse Solution Kits and Libraries Curated by Popular Use Cases

Save this library and start creating your kit

  • © 2022 Open Weaver Inc.