Differences with HDR and how HDR10+ works…

The standard HDR technology adds up the static metadata to the content (*.MP4 video). This will mean that the parameters are applied at the beginning itself and continue throughout. This causes the bright scenes in a movie look too bright and lose detail, while the dark scenes would continue to look dim. In HDR10+ the brightness boundaries of the video clip is configured and changed in a frame by frame manner, the full-color range is added to every scene dynamically no matter whether it contains only dark or only light scenes.

In other words, HDR10+ ensures that you will end up getting the best details in your videos and images.

How an HDR10+ video is viewed on supported and non-HDR devices

There is a problem, when viewing an HDR10+ video on a device that does not support the HDR10+ standard, the video will be displayed as in the following image on the left (with washed-out colors), while on a Galaxy S10 smartphone or TV that supports HDR10+ you will see it as in the image on the right

So, to view an HDR10+ video on an unsupported device, we must first convert it to a video in SDR (standard dynamic range) which however must retains the same depth and intensity of colors, without washed-out colors, as the original HDR10+ video.

How to convert HDR10+ video to SDR on PC

To make the video conversion from HDR10+ to SDR is very simple on a Samsung Galaxy S10 smartphone, but in this article I will explain how to convert it on PC (otherwise, if you want to know how to convert it on Galaxy S10, read this from Samsung).

First of all, you need the ffmpeg software, a free command-line tool that converts audio or video formats; from this link http://ffmpeg.org/download.html look for “Get packages & executable files”, and download the compiled version for your OS (Linux, Windows or Mac).

Step 1 : Extract FFMPEG to a folder

Extract the contents of the zip file to a new folder in “C:\ffmpeg\” (this is a windows path, but you can change it at your convenience).

Step 2 : Create a Batch file and copy your HDR10+ video to convert

Create a new file named “convert.bat” in “C:\ffmpeg\bin” with the following code

C:\ffmpeg\bin\ffmpeg.exe -i video-input.mp4 -vf zscale=t=linear:npl=100,format=gbrpf32le,zscale=p=bt709,tonemap=tonemap=hable:desat=0,zscale=t=bt709:m=bt709:r=tv,format=yuv420p -c:v libx265 -crf 22 -preset medium -tune fastdecode video-output.mp4

Then, copy your HDR10+ video in “C:\ffmpeg\bin” and rename it in “video-input.mp4”

Step 3 : Open a command prompt and execute the batch

Now, press Windows button+R to open the “Run” box. Type “cmd” and click “OK” to open a regular Command Prompt. Finally, type “C:\ffmpeg\bin\convert.bat” to start the conversion from HDR10+ video to a new SDR video named “video-output.mp4”.

Conversion completed!

At the end of the conversion, you will find the new converted file in the “C:\ffmpeg\bin\” folder.

The new SDR file “video-output.mp4” can be viewed on all non-HDR devices, but with the same brightful colors as the original HDR10+ video.

Have fun converting your movies! 😀

The post How to convert HDR10+ videos to SDR (for non-HDR devices) first appeared on MaxVergelli.com.

Using the constructor method

class Person {

  constructor(name) {
    this.name = name;
  }

  introduce() {
    console.log(`Hello, my name is ${this.name}`);
  }

}

const otto = new Person('Otto');

otto.introduce();

If you don’t provide your own constructor, then a default constructor will be supplied for you. If your class is a base class, the default constructor is empty:

constructor() {}

If your class is a derived class, the default constructor calls the parent constructor, passing along any arguments that were provided:

constructor(...args) {
  super(...args);
}

Just as a reminder: the super keyword is used to access and call functions on an object’s parent (more information here https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/super)

Look at these other resources on Javascript constructor:

https://stackoverflow.com/questions/61213185/javascript-equivalent-to-php-construct

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/constructor

The post Javascript equivalent to PHP __construct first appeared on MaxVergelli.com.

simplehtmldom.sourceforge

It treats DOM elements in an object-oriented way, and the new iteration has a lot of coverage for non-compliant code. There are also some great functions like you’d see in JavaScript, such as the “find” function, which will return all instances of elements of that tag name.

I’ve used this in a number of tools, testing it on many different types of web pages, and I think it works great.

These are the main features:

• HTML DOM parser written in PHP 5+ that lets you manipulate HTML in a very easy way
• Require PHP 5+
• Supports invalid HTML
• Find tags on an HTML page with selectors just like jQuery
• Extract contents from HTML in a single line

How to get HTML elements:

// Create DOM from URL or file
$html = file_get_html('http://www.example.com/');

// Find all images
foreach($html->find('img') as $element)
       echo $element->src . '<br>';

// Find all links
foreach($html->find('a') as $element)
       echo $element->href . '<br>';

How to modify HTML elements:

// Create DOM from string
$html = str_get_html('<div id="hello">Hello</div><div id="world">World</div>');

$html->find('div', 1)->class = 'bar';

$html->find('div[id=hello]', 0)->innertext = 'foo';

echo $html;

Extract content from HTML:

// Dump contents (without tags) from HTML
echo file_get_html('http://www.google.com/')->plaintext;

Scraping Slashdot:

// Create DOM from URL
$html = file_get_html('http://slashdot.org/');

// Find all article blocks
foreach($html->find('div.article') as $article) {
    $item['title']     = $article->find('div.title', 0)->plaintext;
    $item['intro']    = $article->find('div.intro', 0)->plaintext;
    $item['details'] = $article->find('div.details', 0)->plaintext;
    $articles[] = $item;
}

print_r($articles);

The post How to parse and process HTML/XML in PHP first appeared on MaxVergelli.com.

<block class="Magento\Catalog\Block\Product\View" name="product.info.custom-product-attributes" template="product/view/custom-product-attributes.phtml" after="product.info.overview"/>
...
<block class="Magento\Catalog\Block\Product\View" name="product.info.custom-estimated-delivery" template="product/view/custom-estimated-delivery.phtml" after="product.price.final"/>

To access a variable declared in the first block from the second block, you can set the variable with register from the first phtml, then you get the value in the 2nd phtml with registry

To do things well without injecting direclty the objectManager in phtml, you have to create some function your product block, so in your block : app/code/Vendor/Modulename/Block/Custom.phpassuming that your variable name is : $tech add the following code:

<?php
namespace Vendor\Modulename\Block;

class Custom extends \Magento\Framework\View\Element\Template
{
    protected $_coreRegistry;

    public function __construct(
        ...
        \Magento\Framework\Registry $coreRegistry
    ) {
        ...
        $this->_coreRegistry = $coreRegistry;
    }

    /**
     * Set var data
     */
    public function setTechData($data)
    {
        $this->_coreRegistry->register('tech', $data);
    }

    /**
     * Get var data
     */
    public function getTechData()
    {
        return $this->_coreRegistry->registry('tech');
    }
}

Then in your First phtml :

<?php $tech = 'Your Data here'; ?>
<?php $block->setTechData($tech); ?>

Then, in the Second phtml :

<?php $block->getTechData(); ?> //you'll get your tech value here

Besides, you can also do that in phtml to test without the block solution,

First phtml :

<?php 
$tech = 'Your Data here';
$objectManager = \Magento\Framework\App\ObjectManager::getInstance();
$objectManager->create("Magento\Framework\Registry")->register('tech', $tech);
?>

Second phtml :

<?php 
$objectManager = \Magento\Framework\App\ObjectManager::getInstance();
$techData = $objectManager->create("Magento\Framework\Registry")->registry('tech');
echo $techData;
?>

The post Access a variable declared in a phtml from another phtml in Magento2 first appeared on MaxVergelli.com.

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
	<!-- some code here -->
    <script src="@Url.Content("~/Scripts/jquery-1.8.2.min.js")">		</script>
    @RenderSection("Scripts", false)
  </body>
</html>

Then, you have a Partial View “ValidationScripts.vbhtml” in the Shared folder with

@Section Scripts
    <script src="@Url.Content("~/Scripts/jquery.validate.min.js")"></script>
    <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")"></script>
    <script src="@Url.Content("~/Scripts/jquery.validate.fix.js")"></script>  
    <script src="@Url.Content("~/Scripts/localization/messages_de.js")"></script>      
End Section

If you call the Partial View from a View like this…

@ModelType MvcExample.MyModel
@Code
    ViewData("Title") = "Test"
End Code

@Html.Partial("ValidationScripts")

<h2>Just a Test</h2>

However the Section “Scripts” is not rendered on the page, and the output HTML will be…

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    
    <script src="@Url.Content("~/Scripts/jquery-1.8.2.min.js")"></script>

  </body>
</html>

Solution

To render the Section in the Partial View, you need to create a couple of Extension methods like this:

public static class HtmlHelperExtensions
{
  private const string _jSViewDataName = "RenderJavaScript";
  private const string _styleViewDataName = "RenderStyle";

  public static void AddJavaScript(this HtmlHelper htmlHelper, 
                                   string scriptURL)
  {
    List<string> scriptList = htmlHelper.ViewContext.HttpContext
      .Items[HtmlHelperExtensions._jSViewDataName] as List<string>;
    if (scriptList != null)
    {
      if (!scriptList.Contains(scriptURL))
      {
        scriptList.Add(scriptURL);
      }
    }
    else
    {
      scriptList = new List<string>();
      scriptList.Add(scriptURL);
      htmlHelper.ViewContext.HttpContext
        .Items.Add(HtmlHelperExtensions._jSViewDataName, scriptList);
    }
  }

  public static MvcHtmlString RenderJavaScripts(this HtmlHelper HtmlHelper)
  {
    StringBuilder result = new StringBuilder();

    List<string> scriptList = HtmlHelper.ViewContext.HttpContext
      .Items[HtmlHelperExtensions._jSViewDataName] as List<string>;
    if (scriptList != null)
    {
      foreach (string script in scriptList)
      {
        result.AppendLine(string.Format(
          "<script type=\"text/javascript\" src=\"{0}\"></script>", 
          script));
      }
    }

    return MvcHtmlString.Create(result.ToString());
  }

  public static void AddStyle(this HtmlHelper htmlHelper, string styleURL)
  {
    List<string> styleList = htmlHelper.ViewContext.HttpContext
      .Items[HtmlHelperExtensions._styleViewDataName] as List<string>;

   if (styleList != null)
   {
     if (!styleList.Contains(styleURL))
     {
       styleList.Add(styleURL);
     }
   }
   else
   {
     styleList = new List<string>();
     styleList.Add(styleURL);
     htmlHelper.ViewContext.HttpContext
       .Items.Add(HtmlHelperExtensions._styleViewDataName, styleList);
   }
 }

 public static MvcHtmlString RenderStyles(this HtmlHelper htmlHelper)
 {
   StringBuilder result = new StringBuilder();

   List<string> styleList = htmlHelper.ViewContext.HttpContext
     .Items[HtmlHelperExtensions._styleViewDataName] as List<string>;

   if (styleList != null)
   {
     foreach (string script in styleList)
     {
       result.AppendLine(string.Format(
         "<link href=\"{0}\" rel=\"stylesheet\" type=\"text/css\" />", 
         script));
     }
   }

  return MvcHtmlString.Create(result.ToString());
  }
}

So, on any View or Partial View or Display/Edit Template you simply add what you need:

@{
  Html.AddJavaScript("http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js");
}

Then, in your Layouts you render it where you want it! Like this markup…

<!DOCTYPE html>
<html lang="en">
  <head>
  @Html.RenderStyles()
  @Html.RenderJavascripts()

The post Render a Section in a Partial View – ASP.Net MVC first appeared on MaxVergelli.com.

The.position() method get only “top,left” values relative to the parent, but it doesn’t set any values, so the following code doesn’t work:

$("#mydiv").css({top: 200, left: 200});

Instead, to set the position relative to the parent, we need to set the position:relative of parent and position:absolute of the element, like in the following piece of code:

$("#mydiv").parent().css({position: 'relative'});
$("#mydiv").css({top: '200px', left: '200px', position:'absolute'});

This works because position: absolute; positions relatively to the closest positioned parent (the closest parent with any position property other than the default static).

Just a reminder: set values correctly in jQuery!

In jQuery if the value passed is a string type, it must be followed by ‘px’ (i.e. ’90px’), where if the value is an integer, it will append the px automatically. The width and height properties are more forgiving (either type works). These are the main differences in the jQuery:

var x = "90";
var y = "120"
$(selector).css( { left: x, top: y } ); //does NOT work!
$(selector).css( { left: x + "px", top: y + "px" } ); //does work!

x = 90;
y = 120;
$(selector).css( { left: x, top: y } ); //does work!

Have fun in jQuery!

The post Set “top,left” of an element with the position relative to the parent in jQuery first appeared on MaxVergelli.com.

<div class="btn-group" role="group" aria-label="..."> 
  <button type="button" class="btn btn-default">Left</button> 
  <button type="button" class="btn btn-default">Middle</button> 
  <button type="button" class="btn btn-default">Right</button> 
</div>

that span the full width of a parent element (like with the “.btn-block” class, but applied to a group http://getbootstrap.com/css/#buttons-sizes )

The solution is just using <div class=”btn-group d-flex” role=”group”></div> as a wrapper around elements with .w-100

This is the correct markup:

<div class="btn-group d-flex w-100" role="group" aria-label="..."> 
  <button type="button" class="btn btn-default w-100">Left</button> 
  <button type="button" class="btn btn-default w-100">Middle</button> 
  <button type="button" class="btn btn-default w-100">Right</button> 
</div>

The post Bootstrap 4 – How to get button groups that span the full width of a parent first appeared on MaxVergelli.com.