Moon phases

Posted on 2. August 2023 by admin

Icons with moon phases are very often used on web calendars. The synodic month is 29.5 days long, but for calendar purposes we can think of four weeks of 28 days. The following is a total of 28 moon phase icons with one day increments.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="300" viewBox="-150 -150 600 300" style="background:lightgray">
<style id="style1">
 .SunLight {
 fill: yellow;
 stroke: gold;
 stroke-width: 0.5;
 }
</style>
<defs>
 <g id="darkMoon"><circle cx="0" cy="0" r="100" /></g>

 <g id="m28f01"><use xlink:href="#darkMoon"/><path id="m02" d="m0,-100 a100,100 0 0,1 0,200 a97.49,100 0 0,0 0,-200 z" class="SunLight"/></g>
 <g id="m28f02"><use xlink:href="#darkMoon"/><path id="m02" d="m0,-100 a100,100 0 0,1 0,200 a90.09,100 0 0,0 0,-200 z" class="SunLight"/> </g>
 <g id="m28f03"><use xlink:href="#darkMoon"/><path id="m02" d="m0,-100 a100,100 0 0,1 0,200 a78.18,100 0 0,0 0,-200 z" class="SunLight"/> </g>
 <g id="m28f04"><use xlink:href="#darkMoon"/><path id="m02" d="m0,-100 a100,100 0 0,1 0,200 a62.35,100 0 0,0 0,-200 z" class="SunLight"/> </g>
 <g id="m28f05"><use xlink:href="#darkMoon"/><path id="m02" d="m0,-100 a100,100 0 0,1 0,200 a43.39,100 0 0,0 0,-200 z" class="SunLight"/> </g>
 <g id="m28f06"><use xlink:href="#darkMoon"/><path id="m02" d="m0,-100 a100,100 0 0,1 0,200 a22.25,100 0 0,0 0,-200 z" class="SunLight"/> </g>
 <g id="m28f07"><use xlink:href="#darkMoon"/><path id="m02" d="m0,-100 a100,100 0 0,1 0,200 a00.00,100 0 0,0 0,-200 z" class="SunLight"/> </g>

 <g id="m28f08"><use xlink:href="#darkMoon"/><path id="m02" d="m0,-100 a100,100 0 0,1 0,200 a-22.25,100 0 0,1 0,-200 z" class="SunLight"/> </g>
 <g id="m28f09"><use xlink:href="#darkMoon"/><path id="m02" d="m0,-100 a100,100 0 0,1 0,200 a-43.39,100 0 0,1 0,-200 z" class="SunLight"/> </g>
 <g id="m28f10"><use xlink:href="#darkMoon"/><path id="m02" d="m0,-100 a100,100 0 0,1 0,200 a-62.35,100 0 0,1 0,-200 z" class="SunLight"/> </g>
 <g id="m28f11"><use xlink:href="#darkMoon"/><path id="m02" d="m0,-100 a100,100 0 0,1 0,200 a-78.18,100 0 0,1 0,-200 z" class="SunLight"/> </g>
 <g id="m28f12"><use xlink:href="#darkMoon"/><path id="m02" d="m0,-100 a100,100 0 0,1 0,200 a-90.09,100 0 0,1 0,-200 z" class="SunLight"/> </g>
 <g id="m28f13"><use xlink:href="#darkMoon"/><path id="m02" d="m0,-100 a100,100 0 0,1 0,200 a-97.49,100 0 0,1 0,-200 z" class="SunLight"/> </g>
 <g id="m28f14"><use xlink:href="#darkMoon"/><path id="m02" d="m0,-100 a100,100 0 0,1 0,200 a-100.0,100 0 0,1 0,-200 z" class="SunLight"/> </g>

 <g id="m28f15"><use xlink:href="#darkMoon"/><path id="m02" d="m0,-100 a100,100 0 0,0 0,200 a-97.49,100 0 0,0 0,-200 z" class="SunLight"/> </g>
 <g id="m28f16"><use xlink:href="#darkMoon"/><path id="m02" d="m0,-100 a100,100 0 0,0 0,200 a-90.09,100 0 0,0 0,-200 z" class="SunLight"/> </g>
 <g id="m28f17"><use xlink:href="#darkMoon"/><path id="m02" d="m0,-100 a100,100 0 0,0 0,200 a-78.18,100 0 0,0 0,-200 z" class="SunLight"/> </g>
 <g id="m28f18"><use xlink:href="#darkMoon"/><path id="m02" d="m0,-100 a100,100 0 0,0 0,200 a-62.35,100 0 0,0 0,-200 z" class="SunLight"/> </g>
 <g id="m28f19"><use xlink:href="#darkMoon"/><path id="m02" d="m0,-100 a100,100 0 0,0 0,200 a-43.39,100 0 0,0 0,-200 z" class="SunLight"/> </g>
 <g id="m28f20"><use xlink:href="#darkMoon"/><path id="m02" d="m0,-100 a100,100 0 0,0 0,200 a-22.25,100 0 0,0 0,-200 z" class="SunLight"/> </g>

 <g id="m28f21"><use xlink:href="#darkMoon"/><path id="m02" d="m0,-100 a100,100 0 0,0 0,200 a00.00,100 0 0,0 0,-200 z" class="SunLight"/> </g>
 <g id="m28f22"><use xlink:href="#darkMoon"/><path id="m02" d="m0,-100 a100,100 0 0,0 0,200 a22.25,100 0 0,1 0,-200 z" class="SunLight"/> </g>
 <g id="m28f23"><use xlink:href="#darkMoon"/><path id="m02" d="m0,-100 a100,100 0 0,0 0,200 a43.39,100 0 0,1 0,-200 z" class="SunLight"/> </g>
 <g id="m28f24"><use xlink:href="#darkMoon"/><path id="m02" d="m0,-100 a100,100 0 0,0 0,200 a62.35,100 0 0,1 0,-200 z" class="SunLight"/> </g>
 <g id="m28f25"><use xlink:href="#darkMoon"/><path id="m02" d="m0,-100 a100,100 0 0,0 0,200 a78.18,100 0 0,1 0,-200 z" class="SunLight"/> </g>
 <g id="m28f26"><use xlink:href="#darkMoon"/><path id="m02" d="m0,-100 a100,100 0 0,0 0,200 a90.09,100 0 0,1 0,-200 z" class="SunLight"/> </g>
 <g id="m28f27"><use xlink:href="#darkMoon"/><path id="m02" d="m0,-100 a100,100 0 0,0 0,200 a97.49,100 0 0,1 0,-200 z" class="SunLight"/> </g>
</defs>

<use transform="scale(0.5)"  xlink:href="#m28f03" x="-75" y="0" />
<use transform="scale(0.5)"  xlink:href="#m28f10" x="150" y="0" />
<use transform="scale(0.5)"  xlink:href="#m28f17" x="375" y="0" />
<use transform="scale(0.5)"  xlink:href="#m28f24" x="600" y="0" />

</svg>
Posted in workday | Tagged | Leave a comment

Reverse diff

Posted on 10. January 2023 by admin

Here is an example how to use grep a “reverse diff” to find different lines in sorted text files. Command grep is using options:
-F, –fixed-strings PATTERN is a set of newline-separated strings
-x, –line-regexp force PATTERN to match only whole lines
-f, –file=FILE obtain PATTERN from FILE

$ cat > list-a.txt <<END
> alpha
> beta
> gamma
> delta
> END

$ cat > list-b.txt <<END
> beta
> delta
> eta
> iota
> kappa
> lambda
> END


$ grep -F -x -f list-a.txt list-b.txt
beta
delta

Posted in workday | Tagged | Leave a comment

JS: Music – Oxygene

Posted on 1. January 2023 by admin

Happy New Year with inventive javascript generated music. Just 19kb js code generating Oxygène Pt. 4 by Jean-Michel Jarre 1976.

Posted in workday | Tagged , | Leave a comment

SVG: NASA “meatball” logo – code update exercise

Posted on 15. December 2022 by admin

I recently went through NASA’s “meatball” logo, originally designed by James Modarelli in 1959. Looking at the svg version of this famous logo, I was interested in the svg code. It was obviously designed by some editor and not “by hand”. Here is an updated “beautified” version, at least from the code perspective, the result of a good and interesting svg exercise. There is an interesting fact that paths for all four letters are mixing absolute and relative path commands. It means that it is impossible to easily change a letter’s location, if necessary. 

<svg version="1.1"
     xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"
     x="0px" y="0px" width="550px" height="460px" viewBox="0 0 110 92" enable-background="new 0 0 110 92"
     xml:space="preserve">
<defs>
 <g id="Spiky4StarRelative" transform="scale(0.5,0.5)">
 <path d="M-1.2,-1.2
l 0.2,-2.2 0.2,2.2 a1,1 0,0,1 0.8, 0.8
l 2.2,0.2 -2.2,0.2 a1,1 0,0,1 -0.8, 0.8
l-0.2,2.2 -0.2,-2.2 a1,1 0,0,1 -0.8,-0.8
l -2.2,-0.2 2.2,-0.2 a1,1 0,0,1 0.8,-0.8
 z" fill="white"/>
</g>
 <g id="RoundStars">
<circle fill="white" cx="47.68" cy="12.57" r="0.45"/>
<circle fill="white" cx="52.30" cy="13.17" r="0.45"/>
<circle fill="white" cx="58.36" cy="21.33" r="0.45"/>
<circle fill="white" cx="25.12" cy="63.33" r="0.45"/>
<circle fill="white" cx="26.29" cy="66.93" r="0.45"/>
<circle fill="white" cx="35.80" cy="61.32" r="0.45"/>
<circle fill="white" cx="38.50" cy="67.02" r="0.45"/>
<circle fill="white" cx="70.84" cy="61.08" r="0.45"/>
<circle fill="white" cx="82.48" cy="60.42" r="0.45"/>
<circle fill="white" cx="76.72" cy="57.96" r="0.45"/>
<circle fill="white" cx="70.84" cy="58.20" r="0.45"/>

<circle fill="white" cx="20.71" cy="63.87" r="0.337"/>
<circle fill="white" cx="39.01" cy="70.94" r="0.338"/>
<circle fill="white" cx="67.71" cy="64.98" r="0.337"/>
<circle fill="white" cx="76.05" cy="55.92" r="0.338"/>
<circle fill="white" cx="35.17" cy="23.96" r="0.337"/>
<circle fill="white" cx="44.35" cy="17.22" r="0.337"/>
<circle fill="white" cx="43.35" cy="16.56" r="0.337"/>
<circle fill="white" cx="42.45" cy="15.90" r="0.337"/>
<circle fill="white" cx="36.61" cy="25.70" r="0.337"/>
<circle fill="white" cx="50.13" cy="08.16" r="0.337"/>
<circle fill="white" cx="52.35" cy="17.88" r="0.337"/>
<circle fill="white" cx="48.85" cy="15.98" r="0.337"/>
<circle fill="white" cx="42.85" cy="18.56" r="0.337"/>
<circle fill="white" cx="69.31" cy="73.88" r="0.337"/>
<circle fill="white" cx="24.55" cy="65.61" r="0.338"/>
<circle fill="white" cx="48.01" cy="69.96" r="0.338"/>
<circle fill="white" cx="31.53" cy="65.34" r="0.338"/>
<circle fill="white" cx="34.45" cy="70.10" r="0.338"/>
<circle fill="white" cx="55.93" cy="67.10" r="0.337"/>
<circle fill="white" cx="67.77" cy="60.42" r="0.337"/>
<circle fill="white" cx="76.75" cy="64.52" r="0.337"/>
<circle fill="white" cx="79.82" cy="66.48" r="0.337"/>
<circle fill="white" cx="80.31" cy="61.14" r="0.337"/>
<circle fill="white" cx="35.67" cy="53.58" r="0.337"/>
</g>
 <g id="SpikyStars">
<use xlink:href="#Spiky4StarRelative" transform="translate(58.710,12.288)"></use>
<use xlink:href="#Spiky4StarRelative" transform="translate(39.824,24.746)"></use>
<use xlink:href="#Spiky4StarRelative" transform="translate(81.659,57.684)"></use>
<use xlink:href="#Spiky4StarRelative" transform="translate(36.044,74.906)"></use>
<use xlink:href="#Spiky4StarRelative" transform="translate(78.104,66.506)"></use>
 </g>
</defs>
<g id="NASA_logo_meatball">
 <circle fill="#0B3D91" cx="50.049" cy="45" r="40.14"/>
 <use xlink:href="#RoundStars"></use>
 <use xlink:href="#SpikyStars"></use>
 <path id="redFlames" fill="#FC3D21"
       d="M59.568,35.385c-4.667,1.814-9.219,3.433-13.06,4.635c-7.805,2.444-29.16,9.06-42.06,17.4l1.08,0.42 c7.86-4.44,12.969-5.835,17.88-7.38c5.34-1.68,22.603-5.72,30.42-7.92c2.641-0.743,5.734-1.716,9.01-2.9 c-0.762-1.063-1.566-2.129-2.412-3.193C60.143,36.088,59.856,35.734,59.568,35.385z M65.27,43.244 c-1.13,0.763-2.077,1.372-2.74,1.756c-3.84,2.22-22.561,15-26.82,17.94s-16.08,14.1-19.56,17.34l-0.12,1.319 c11.22-10.08,14.74-12.566,19.2-15.959c5.52-4.2,16.939-11.97,20.82-14.46c3.71-2.38,7.056-4.569,10.059-6.572 c-0.049-0.082-0.098-0.164-0.147-0.247C65.736,43.99,65.505,43.618,65.27,43.244z M82.809,24.72 c-5.466,3.204-14.081,7.071-22.439,10.352c0.2,0.245,0.399,0.492,0.597,0.741c0.934,1.176,1.815,2.36,2.644,3.545 c6.57-2.42,13.779-5.668,19.499-9.599c-2.725,2.582-11.734,9.315-17.227,13.068c0.283,0.461,0.557,0.922,0.822,1.381 c8.322-5.569,13.922-9.668,17.185-12.409c4.5-3.78,14.76-12.24,18.66-23.58C95.709,16.92,87.621,21.899,82.809,24.72z"/>
 <path id="orbit" fill="white"
       d="M44.884,54.939c-0.885-1.114-2.109-2.606-3.028-3.763c-1.229-1.547-2.366-3.11-3.408-4.671 c-0.34,0.085-0.679,0.17-1.018,0.255c1.258,1.963,2.655,3.923,4.177,5.839c1.112,1.4,2.123,2.527,2.641,3.228 c0.105,0.142,0.313,0.456,0.594,0.874c0.324-0.22,0.651-0.442,0.981-0.666C45.504,55.688,45.189,55.323,44.884,54.939z M51.344,60.803c-0.727-0.688-2.49-1.837-4.325-3.561c-0.405,0.278-0.814,0.56-1.224,0.844c1.185,1.67,2.799,3.721,4.063,4.319 C51.762,63.307,52.275,61.685,51.344,60.803z M60.967,35.813c-10.492-13.206-23.309-20.461-28.835-16.07 c-4.292,3.41-2.53,13.376,3.386,23.845c0.306-0.105,0.609-0.208,0.909-0.31c-5.971-10.2-7.605-19.679-3.557-22.896 c5.087-4.042,17.37,3.241,27.558,16.064c2.109,2.654,3.963,5.318,5.533,7.915c6.012,9.95,7.857,18.948,3.703,22.621 c-1.271,1.124-5.155,1.565-10.243-0.725c-0.071,0.089,0.043,0.33,0.132,0.389c4.392,1.766,8.599,2.439,10.723,0.752 C75.38,63.342,71.459,49.019,60.967,35.813z"/>

 <g id="NASA">
		 <path id="N" fill="white"
      d="M15.969,37.38h6.72l5.64,9.57c0,0,0-6.93,0-7.47c0-0.84-1.065-1.935-1.44-2.1c0.45,0,4.38,0,4.65,0 c-0.285,0.075-1.2,1.185-1.2,2.1c0,0.45,0,10.5,0,10.98c0,0.675,0.975,1.605,1.44,1.965h-6.48l-5.73-9.615c0,0,0,7.17,0,7.56 c0,0.75,0.735,1.47,1.5,2.085h-4.95c0.705-0.3,1.38-1.245,1.44-1.995s0-10.425,0-10.845C17.559,38.7,16.674,37.95,15.969,37.38z"/>
   <!--path id="Absolute" fill="black" d="M38.559,50.79c0.09-0.6,0.36-1.8,0.36-1.8h4.98c0.225,0.6,0.393,1.139,0.48,1.65 c0.105,0.615-0.525,1.305-1.08,1.785h7.871 c0.164-0.11,0.327-0.22,0.49-0.329c-0.305-0.27-0.586-0.675-0.771-1.156 c-0.3-0.78-5.04-13.56-5.04-13.56h-7.8c0.375,0.345,1.455,1.275,1.29,2.28 c-0.147,0.9-2.808,10.534-2.97,11.01 c-0.225,0.66-1.38,1.395-1.845,1.785h4.815C38.859,51.915,38.469,51.39,38.559,50.79zM41.049,41.58 l2.22,5.49h-3.9L41.049,41.58 z"/-->
   <path id="Arelative" fill="white" d="M38.559,50.79c0.09-0.6,0.36-1.8,0.36-1.8h4.98c0.225,0.6,0.393,1.139,0.48,1.65 c0.105,0.615-0.525,1.305-1.08,1.785h7.871 c0.164-0.11,0.327-0.22,0.49-0.329c-0.305-0.27-0.586-0.675-0.771-1.156 c-0.3-0.78-5.04-13.56-5.04-13.56h-7.8c0.375,0.345,1.455,1.275,1.29,2.28 c-0.147,0.9-2.808,10.534-2.97,11.01 c-0.225,0.66-1.38,1.395-1.845,1.785h4.815
     c-0.45,-0.659 -0.84,-1.22, -0.75,-1.82 z m2.5,-9.2 l2.22,5.49h-3.9 z"/>
   <path id="S" fill="white"
      d="M65.748,44.848c-1.468,0.978-3.017,1.999-4.649,3.065c0.732,0.355,1.315,0.801,1.371,1.377 c0.104,1.082-2.07,1.605-4.035,1.38c-0.393-0.045-0.779-0.148-1.147-0.286c-0.408,0.263-0.82,0.528-1.238,0.796 c-0.425,0.273-0.941,0.609-1.53,0.997v1.553c0.39-0.765,1.243-1.45,1.905-1.485c0.285-0.015,1.275,0.9,5.355,0.675 c1.98-0.109,5.805-2.22,5.745-4.65C67.489,46.834,66.739,45.714,65.748,44.848z M54.519,48.6v1.582 c0.361-0.241,0.717-0.478,1.066-0.709C55.036,49.091,54.647,48.734,54.519,48.6z M64.353,43.855 c-0.38-0.225-0.765-0.422-1.134-0.596c-1.92-0.9-3.93-1.065-4.35-2.28c-0.296-0.857,0.54-1.65,2.58-1.62 c2.04,0.03,3.93,1.245,4.44,1.68v-3.87c-0.15,0.15-0.808,0.905-1.41,0.78c-1.155-0.24-3.12-0.553-5.37-0.54 c-2.58,0.015-4.8,2.009-4.875,4.53c-0.105,3.525,2.715,4.485,4.305,5.04c0.164,0.057,0.351,0.118,0.554,0.183 c1.525-0.992,2.731-1.756,3.437-2.163C63.004,44.726,63.625,44.334,64.353,43.855z"/>
   <path id="A" fill="white"
      d="M77.439,52.425h8.94c-0.495-0.12-1.05-0.705-1.35-1.485c-0.3-0.78-5.04-13.56-5.04-13.56H76.59 c-0.964,0.694-1.997,1.426-3.1,2.197c-0.003,0.028-0.006,0.056-0.011,0.083c-0.148,0.9-2.808,10.534-2.97,11.01 c-0.225,0.66-1.38,1.395-1.845,1.785h4.815c-0.48-0.54-0.87-1.065-0.78-1.665c0.09-0.6,0.36-1.8,0.36-1.8h4.98 c0.225,0.6,0.393,1.139,0.48,1.65C78.624,51.255,77.994,51.945,77.439,52.425z M73.509,47.07l1.68-5.49l2.22,5.49H73.509z M72.752,37.928c0.247-0.182,0.495-0.365,0.742-0.548h-1.305C72.319,37.5,72.534,37.689,72.752,37.928z"/>
	</g>
</g>
</svg>
Posted in workday | Tagged | Leave a comment

SVG: Resizing svg element

Posted on 12. December 2022 by admin

Sometimes there is a need to resize svg element by javascript. SVG image with pink background in the following example has initial “Fullsize” dimensions 1920×1080. SVGLength interface and more is described at https://developer.mozilla.org/en-US/docs/Web/API under letter S with prefix SVG . Initial width and height is resized to 200×100 in this code snippet.

<svg id="svg" width="1920" height="1080" style="background-color:pink" />
<script>
  let svg = document.getElementById('svg');
  svg.width.baseVal.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PX,200);
  svg.height.baseVal.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PX,100);
</script>
Posted in workday | Tagged | Leave a comment

ChatGPT: Toggle Full size html page

Posted on 11. December 2022 by admin

There is a new kid on the block: ChatGPT powered by OpenAI. And here is a test question: “How to make web page with toggle button in Javascript to resize to full screen page showing screen dimensions“. It’s fascinating to see writing answer is the real time. Here it is:

To create a web page with a toggle button that resizes the page to full screen and shows the screen dimensions, you can use the following steps:

1. First, create a new HTML file and add the following code to create a basic structure for your web page:

    <!DOCTYPE html>
<html>
<head>
  <title>Full Screen Toggle</title>
</head>
<body>

</body>
</html>

    2. Next, add a <button> element to the page, which will be used as the toggle button. You can add the following code to the <body> element:

    <button id="toggle-fullscreen">Toggle Full Screen</button>

    3. Then, create a <div> element that will be used to display the screen dimensions. You can add the following code to the <body> element:

    <div id="screen-dimensions"></div>

    4. After that, add a <script> element to the page, which will contain the JavaScript code that will make the toggle button work. You can add the following code to the <body> element:

    <script>
  // JavaScript code goes here
</script>

    5. Inside the <script> element, add the following code to get the dimensions of the screen and display them in the <div> element:

    // Get the screen dimensions
var screenWidth = window.innerWidth;
var screenHeight = window.innerHeight;

// Get the <div> element for displaying the screen dimensions
var screenDimensionsElement = document.getElementById("screen-dimensions");

// Set the text content of the <div> element to the screen dimensions
screenDimensionsElement.textContent = "Screen dimensions: " + screenWidth + " x " + screenHeight;

    6. Finally, add the following code to make the toggle button toggle between full screen and normal screen mode:

    // Get the toggle button
var toggleButton = document.getElementById("toggle-fullscreen");

// Add a click event listener to the toggle button
toggleButton.addEventListener("click", function() {
  // Check if full screen mode is enabled
  if (document.fullscreenElement) {
    // If full screen mode is enabled, exit full

    Conclusion: Not bad for the first attempt. But script at last step is not done, there are missing curly brackets and code. On the other hand this code could be a good starting point to develop such page, but a real programmer has to do the last “details”.
    So here is a Full Screen Toggle dimensions report web page code:

    <!DOCTYPE html>
<!-- 2022-1211 Chat GPT: How to make web page with toggle button in Javascript to resize to full screen page showing screen dimensions -->
<html>
<head>
    <title>Full Screen Toggle dimensions report</title>
    <style>
        .center {
            text-align: center;
        }
    </style>
    <script>
        var elem = document.documentElement;

        function openFullscreen() {
            if (elem.requestFullscreen) {
                elem.requestFullscreen();
            } else if (elem.webkitRequestFullscreen) { /* Safari */
                elem.webkitRequestFullscreen();
            } else if (elem.msRequestFullscreen) { /* IE11 */
                elem.msRequestFullscreen();
            }
        }

        function closeFullscreen() {
            if (document.exitFullscreen) {
                document.exitFullscreen();
            } else if (document.webkitExitFullscreen) { /* Safari */
                document.webkitExitFullscreen();
            } else if (document.msExitFullscreen) { /* IE11 */
                document.msExitFullscreen();
            }
        }

        function toggleFullscreen() {
            // Check if full screen mode is enabled
            if (document.fullscreenElement) {
                closeFullscreen();
            } else {
                openFullscreen();
            }
        }
    </script>
</head>
<body>

<div class="center">
    <h2>Full Screen Toggle dimensions report</h2>
    <button id="toggle-fullscreen">Toggle Full Screen</button>
    <h1 id="screen-dimensions"></h1>
</div>
<script>
    // Get the element for displaying the screen dimensions
    var screenDimensionsElement = document.getElementById("screen-dimensions");

    // Set the text content of the <div> element to the screen dimensions
    function textContentUpdate(fullScreen) {
        // Get the screen dimensions
        var screenWidth = window.innerWidth;
        var screenHeight = window.innerHeight;
        var screenType = fullScreen ? "Fullscreen" : "Screen";
        var dimensions = screenType + " dimensions: " + screenWidth + " x " + screenHeight;
        screenDimensionsElement.textContent = dimensions;
        console.info(dimensions);
    }

    textContentUpdate();

    // Get the toggle button
    var toggleButton = document.getElementById("toggle-fullscreen");

    function toggleAndReportDimensions() {
        toggleFullscreen();
        // Add 300ms delay to make sure window.innerWidth and window.innerHeight values are updated by js system
        setTimeout(function () {
            textContentUpdate(document.fullscreenElement);
        }, 300);
    }

    // Add a click event listener to the toggle button
    toggleButton.addEventListener("click", toggleAndReportDimensions);
</script>

</body>
</html>
    Posted in workday | Tagged , , | Leave a comment

    SVG: Circular text

    Posted on 8. December 2022 by admin

    Sometimes is needed circular text. Here is few examples how it can be done. All of them are working with a circular path with radius 100, then circumference is 628. The first example is going to create circular path from starting point A very close to the bottom circle and it ends on opposite side of the vertical axis point B. Let’s say that point A and B will be just 1 unit off the vertical axis, so they will be 2 units distant. The circle with radius 100 has circumference 628, but in this case we have to subtract distance AB, so path length is 628. Here is SVG code snippet:

    <path id="path1" d="M0,0 m-1,100 a100,100 0 1,1  2,0 " style="fill:none;fill-opacity: 1;stroke:green;stroke-width: 1"/>
<text dy="12" dx="0" textLength="626">
  <textPath xlink:href="#path1">This text starts at bottom "6" and goes around</textPath>
</text>
    R = 100 A B This text starts at bottom “6” and goes around

    We can notice that end of the text is too close to the start. We can start with offset dx=”12″ and we should make textLength twice as much shorter to 628-2-12-12=602. And here is result:

    R = 100 A B This text starts at bottom “6” and goes around

    Now what if we would like the text outside of the circular path. Than offset y should be zero dy=”0″.

    R = 100 A B This text starts at bottom “6” and goes around

    Text almost around 360 degrees is not so easy to read. Solution can be to split text into two parts. Here is an example with SVG code snippet:

    <path id="path1a" d="M0,0 m-70.7,70.7 a100,100 0 1,1  141.4,0 " style="fill:none;fill-opacity: 1;stroke:green;stroke-width: 1"></path>
<text dy="12" dx="0" textLength="471">
      <textPath xlink:href="#path1a">This is upper text and goes around circle</textPath>
</text>
<path id="path2a" d="M0,0 m-70.7,70.7 a100,100 0 0,0  141.4,0 " style="fill:none;fill-opacity: 1;stroke:red;stroke-width: 1"></path>
<text dy="-2" dx="5" textLength="147">
      <textPath xlink:href="#path2a">* Bottom text *</textPath>
</text>
    R = 100 A B This is upper text and goes around circle * Bottom text *
    Posted in workday | Tagged | Leave a comment

    SVG: Pleiades

    Posted on 5. December 2022 by admin

    In the recent post have been described how to create spiky star. Let’s utilize that knowledge to create star cluster Pleiades from the eight brightest spiky stars. Relative size can be computed by formula sqrt(8000/POW(2,511886432;magnitude). Number 8000 is just arbitrarily selected constant for this example. More can be find at Wikipedia. Positions are taken from the map of Pleiades. Of course, better would be to create gnomonic map of this star cluster, maybe in the future.

    Starmagsize
    Alcyone2.8623.96
    Atlas3.6216.89
    Electra3.716.28
    Maia3.8615.12
    Merope4.1713.11
    Taygetta4.2912.40
    Pleione5.098.58
    Caleano5.447.30
    <svg x="0px" y="0px" width="600px" height="460px" 
 viewBox="50 100 750 500" xml:space="preserve">
<defs>
 <g id="Star">
   <path d="M-0.2,-1
    l .2,-3   .2,3    a1,1 0,0,1  0.8, 0.8
    l  3,.2   -3,0.2  a1,1 0,0,1 -0.8, 0.8
    l-.2,3  -0.2,-3   a1,1 0,0,1 -0.8,-0.8
    l -3,-.2   3,-0.2 a1,1 0,0,1  0.8,-0.8
    z"  fill="lightblue" stroke="silver" stroke-width="0.1"/>
 </g>
</defs>

<rect x="50" y="00" width="750" height="500" fill="darkblue" />
<use xlink:href="#Star" transform="translate(88,294) scale(8.6)" id="Pleione 5.09"></use>
<use xlink:href="#Star" transform="translate(91,342) scale(16.9)" id="Atlas 3.62"></use>
<use xlink:href="#Star" transform="translate(314,315) scale(24)" id="Alcyone 2.86"></use>
<use xlink:href="#Star" transform="translate(470,408) scale(13.1)" id="Merope 4.17"></use>
<use xlink:href="#Star" transform="translate(538,166) scale(15.1)" id="Maia 3.86"></use>
<use xlink:href="#Star" transform="translate(622,109) scale(12.4)" id="Taygetta 4.29"></use>
<use xlink:href="#Star" transform="translate(666,317) scale(16.3)" id="Electra 3.70"></use>
<use xlink:href="#Star" transform="translate(674,210) scale(7.3)" id="Caleano 5.44"></use>

</svg>
    Posted in workday | Tagged | Leave a comment

    SVG: Spiky Star

    Posted on 2. December 2022 by admin

    Let’s say we would like to create spiky star. One option would be to utilize tag path. Picture below should help to explain, how to design path. In the center “C” is a unit circle with radius 1. Each spike has base 0.8 wide (2*0.4) and height 1.5. Now let’s compute absolute coordinates for the green path points. Vertical distance for the first point g1 has value sqrt(1*1 -0.4*0.4) = 0.9165… Here is list of the few points.

    g1[-0.4,-0.9165], g2[0,-2.4165], g3[0.4,-0.9165], g4[0.9165,-0.4], g5[2.4165,0], ...
    C g1 g2 g3 g4 r1 r2 r3 r4

    In similar fashion can be computed red path points. It is obvious, that in this case is much easier to compute their coordinates. On the other hand radius of the arc connecting point r3 and r4 is not just 1, but it has a value sqrt(1*1+ 0.4*0.4) = 1.077… In reality arc with radius 1 or arc with radius 1.077 is almost the same, especially for narrow spike base. 

    r1[-0.4,-1], r2[0,-2.5], r3[0.4,-1], r4[1,-0.4], r5[2.5,0], ...

    Here is a star with 4 spikes with base spike 0.4 (2*.2) and height 3 using absolute coordinates:

    <svg viewBox="-5 -5 10 10" width="600" height="600" >
<defs>
  <g id="Spiky4StarAbsolute">
     <path d="M-0.2,-1
	L 0,-4 0.2,-1	 A1,1 0,0,1    1,-0.2
	L 4,0    1,0.2   A1,1 0,0,1  0.2,1
	L 0,4 -0.2,1     A1,1 0,0,1   -1,0.2
	L-4,0   -1,-0.2  A1,1 0,0,1 -0.2,-1
	z" fill="lightblue" stroke="blue" stroke-width="0.03"
      />
 </g>
</defs>
 <use xlink:href="#Spiky4StarAbsolute" ></use>
</svg>

    And here is a star with 4 spikes with base spike 0.4 (2*.2) and height 3 using absolute coordinates:

    <svg viewBox="-4 -4 8 8" width="600" height="600" >
<defs>
  <g id="Spiky4StarRelative">
     <path d="M-0.2,-1
	l .2,-3   .2,3	  a1,1 0,0,1  0.8, 0.8
	l  3,.2   -3,0.2  a1,1 0,0,1 -0.8, 0.8
	l-.2,3  -0.2,-3   a1,1 0,0,1 -0.8,-0.8
	l -3,-.2   3,-0.2 a1,1 0,0,1  0.8,-0.8
	 z"  fill="pink" stroke="red" stroke-width="0.03"/>
  </g>
</defs>
 <use xlink:href="#Spiky4StarRelative" ></use>
</svg>

    Here is PHP code, which can generate spiky star svg image.

    ....
<svg viewBox="-4 -4 8 8" width="600" height="600" >
<defs>
  <g id="Spiky4StarRelative">
<?php
  $fill = "lightgray";
  $stroke = "silver";
  $strokeWidth = 0.03;
  $r = 1.0;
  $w = 0.2;
  $d = $r - $w;
  $h = 2.2;
  echo <<<END
     <path d="M-$w,-$r
        l $w,-$h  $w,$h   a$r,$r 0,0,$r  $d, $d
        l  $h,$w  -$h,$w  a$r,$r 0,0,$r -$d, $d
        l-$w,$h  -$w,-$h   a$r,$r 0,0,$r -$d,-$d
        l -$h,-$w   $h,-$w a$r,$r 0,0,$r  $d,-$d
         z"  fill="$fill" stroke="$stroke" stroke-width="$strokeWidth"/>

END
?>
  </g>
</defs>
 <use xlink:href="#Spiky4StarRelative" ></use>
</svg>
....
    Posted in workday | Tagged | Leave a comment

    Structural formula: HydroxylAmmonium Nitrate

    Posted on 1. December 2022 by admin

    Here is slightly better structural formula of the HydroxylAmmonium Nitrate mentioned in the yesterday post.

    H N O – +
    Posted in workday | Leave a comment