How to make A-Frame cursor interact only with the closest object - cursor

I am writing an A-Frame project. I have some questions of cursor.
Is it possible to set the 'near' for the a-entity tag with attribute 'cursor'?
And the cursor emit the event of the object behind my target object, what is the reason and how to solve it?
This is the code of my cursor:
<a-entity id="cursor"
cursor="fuse: false"
position="0.000 0.000 -0.1"
geometry="primitive: ring; radiusInner: 0.0008; radiusOuter: 0.0013"
material="color: black; shader: flat"
near="5"
showLine="true"
cursor-submit
>
</a-entity>
Project: https://github.com/LeMueller/skills-lab-web
Live Demo: http://webvr.virtualskillslab.de/
Thank you for any help you can provide.

If you want to (and you should) whitelist the objects you want to intersect, set the raycaster.objects property.
<a-entity cursor raycaster="objects: [data-raycastable]"
<a-sphere data-i-am-not-raycastable></a-sphere>
<a-box data-raycastable></a-box>

Related

Need explanation with Icecast URL authentication

Foreword: I am stuck due to poor coding skills and a lack of understanding of the details of the URL authentication. I am not a coder but an amateur who usually get by with a little help from Google.
Challenge 1:
I am trying to set Icecast up in such a way that the audio stream can only be heard when you log in to my website. The method is called URL authentication by Icecast. Here is the link to the official documentation:
https://icecast.org/docs/icecast-2.4.0/auth.html
My problem: I understand that I have to integrate certain queries in the icecast.xml that are then answered by the player on my website. Unfortunately, I don't know where to integrate these codes. In a file in the webroot? In the header of the player page?
Challenge 2:
Another thing is that the player is working, but when I hit the pause button and restart the player 10 minutes later the song picks up there I paused the player even though the radio stream is already 2 titles ahead. So the cover art does not match the audio.
I guess that also has something to do with certain tweaks in the icecast.xml. Again ... I don't know how to add these tweaks and how to address them on my website (same issue as with the authentication).
Due to royalty issues, my website is behind a firewall for the time being.
Can anyone shed some light on my questions?
I included the code of my icecast.xml and of the iFrame that contains the player.
Best wishes,
Paul
This is the iFrame that contains the Drupal website and the HTML5 player:
<html>
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="-1" />
<meta name=viewport content="width=device-width, initial-scale=1">
<style type="text/css">
html, body {
background: #333333;
height: 100%;
margin: 0px;
padding: 0px;
border: 0px;
}
iframe {
width: 100%;
height: 92%;
margin: 0px;
padding: 0px;
border: none;
display: block;
}
</style>
<body>
<?php
print('<iframe id="drupal_site" src="http://test.zoootradio.com" height="92%" width="100%" frameborder="0"></iframe>');
header("Cache-Control: no-cache, no-store, must-revalidate"); // HTTP 1.1.
header("Pragma: no-cache"); // HTTP 1.0.
header("Expires: 0"); // Proxies.
print('<audio id="player" controls>');
print('<source src="http://192.168.2.50:8000/zr.mp3" type="audio/mpeg">');
print('</audio>');
?>
</body>
</html>
This is my icecast.xml file:
<icecast>
<location>Earth</location>
<admin>icemaster#localhost</admin>
<limits>
<clients>15</clients>
<sources>1</sources>
<queue-size>524288</queue-size>
<client-timeout>30</client-timeout>
<header-timeout>15</header-timeout>
<source-timeout>10</source-timeout>
<burst-on-connect>1</burst-on-connect>
<burst-size>65535</burst-size>
</limits>
<authentication>
<!-- Sources log in with username 'source' -->
<source-password>XXXXXXX</source-password>
<!-- Relays log in with username 'relay' -->
<relay-password>XXXXXXX</relay-password>
<!-- Admin logs in with the username given below -->
<admin-user>XXXXXXX</admin-user>
<admin-password>XXXXXXX</admin-password>
</authentication>
<hostname>192.168.2.50</hostname>
<!-- You may have multiple <listener> elements -->
<listen-socket>
<port>8000</port>
<!-- <bind-address>127.0.0.1</bind-address> -->
<!-- <shoutcast-mount>/stream</shoutcast-mount> -->
</listen-socket>
<http-headers>
<header name="Access-Control-Allow-Origin" value="*" />
</http-headers>
<mount type="normal">
<mount-name>/zr.mp3</mount-name>
<authentication type="url">
<option name="stream_auth" value="http://test.zoootradio.com/player"/>
</authentication>
</mount>
<fileserve>1</fileserve>
<paths>
<!-- basedir is only used if chroot is enabled -->
<basedir>/usr/share/icecast2</basedir>
<!-- Note that if <chroot> is turned on below, these paths must both
be relative to the new root, not the original root -->
<logdir>/var/log/icecast2</logdir>
<webroot>/usr/share/icecast2/web</webroot>
<adminroot>/usr/share/icecast2/admin</adminroot>
<!-- <pidfile>/usr/share/icecast2/icecast.pid</pidfile> -->
<alias source="/" destination="/status.xsl"/>
<!-- The certificate file needs to contain both public and private part.
Both should be PEM encoded.
<ssl-certificate>/usr/share/icecast2/icecast.pem</ssl-certificate>
-->
</paths>
<logging>
<accesslog>access.log</accesslog>
<errorlog>error.log</errorlog>
<!-- <playlistlog>playlist.log</playlistlog> -->
<loglevel>3</loglevel> <!-- 4 Debug, 3 Info, 2 Warn, 1 Error -->
<logsize>10000</logsize> <!-- Max size of a logfile -->
<!-- If logarchive is enabled (1), then when logsize is reached
the logfile will be moved to [error|access|playlist].log.DATESTAMP,
otherwise it will be moved to [error|access|playlist].log.old.
Default is non-archive mode (i.e. overwrite)
-->
<!-- <logarchive>1</logarchive> -->
</logging>
<security>
<chroot>0</chroot>
<!--
<changeowner>
<user>nobody</user>
<group>nogroup</group>
</changeowner>
-->
</security>
1 - "URL auth"
Your icecast.xml does not contain any definition, so you don't have URL-auth configured.
What are you really trying to achieve?
2 - pause
Streams can't be paused, don't try to do it, it will break things. If you stop a stream, make sure that you do it in a way that makes the browser actually drop the connection.
Also you should always use a 'cache buster' or other way to ensure that the browser does not try to use cached stream content. (See my other answers on related topics here)

Get the values from the <xd:doc/>

I want to access the version information which I store in the
<xsl:stylesheet>
<xd:doc scope="stylesheet">
<xd:ul>
<xd:li>
<xd:i>Updates</xd:i>: <xd:ul>
<xd:li>20.11.2018, version: <xd:i>1.1.0</xd:i></xd:li>
<xd:li>08.03.2019, version: <xd:i>2.0.0</xd:i></xd:li>
<xd:li>11.03.2019, version: <xd:i>2.0.1</xd:i></xd:li>
</xd:ul>
</xd:li>
</xd:ul>
</xd:doc>
</xsl:stylesheet>
Normally the XPath of the #select is evaluated to the xml-file which is currently transforming. But how refer XPath to the (main) XSL-stylesheet?
Another option would be to use fn:doc(). But I want to place the version-writing-functionality in an external module, so there will be dynamic file names and I don't know how to get the xsl-file name
I use oXygen XML editor 20.1 where I define the transformation scenarios.
#MartinHonnen Thank you. I updated the code in the question. As you may see I store the version in the docs of the stylesheet.
The document('') / doc('') was what I needed. So I implemented the following:
I put the document-node of the main stylesheet in the variable which is placed in this stylesheet:
<xsl:variable name="currentStylesheet" select="doc('')"/>
then refer to it in the external module
<xsl:variable as="xs:string" name="versionXSLT" select="$currentStylesheet//xd:li[xd:i = 'Updates']/xd:ul/xd:li[last()]/xd:i/string()"/>
I also use it to get the name of the stylesheet:
<xsl:variable as="xs:string" name="currentStylesheetName" select="tokenize(document-uri($currentStylesheet), '/')[last()]"/>
Are there maybe better solutions?

Displaying code chunks in a frame in hugo using blogdown

I have recently created a blog post using blogdown and hugo. I was able to add code folding but the code appears like regular text on the website. I am trying to display the code in a frame or something distinguishing it from the rest of the text ex:
I have tried everything but could not figure how to do it. I am guessing it has to deal something with the theme I am using. I am using Hugo Nuo.
You can find the current shape of the blog post here:
https://www.staturk.xyz/post/poll-accuracy-in-turkish-elections/
Here is the beginning of my .rmd file for the post where I am trying to display the code in a frame:
---
title: "Poll Accuracy in Turkish Elections"
date: '2018-12-25'
slug: poll-accuracy-in-turkish-elections
tags:
- Polls
- Politics
- R
categories:
- Turkish Politics
- Rstats
---
```{r, echo=FALSE}
htmltools::includeHTML("~/Documents/Personal/Projects/Blog/Turkstat/content/media/posts/header.html")
```
```{r echo = F, results='hide', message=FALSE}
library(tidyverse)
library(plyr)
library(stringr)
library(scales)
library(knitr)
```
There are two steps here - figuring out what to style and then adding the style to the theme.
Figuring out what to style
Looking at the raw html for the post (ctrl-U in Chrome), the code fragments are wrapped in a <pre class="r"><code>..</code></pre> tag set. So, we could give it a border (for instance) by adding the following to the html header :
<style>
pre.r {
border-style: solid;
border-width: 2px;
}
</style>
Adding to the theme
Looking at the theme code, the best way to accomplish this seems to be to override the head partial in themes/{theme_name}/layouts/partials/head.html. Copy that file up into the the same area of the site folder. The following commands will do the trick if you are on linux:
cd $sitedir
mkdir -p layouts/partials
cp themes/hugo-nuo/layouts/partial/head.html layouts/partial
Then edit the copy of the file to add the above style fragment.

Formatting ng-init text inside input tag - AngularJS

I am having ng-init defined in my input tag. I would like to have this input in the specified format with line breaks.
I tried using <pre> tags and white-space:pre-line property too. But this seems not to get sorted.
<div style="font-family: Poppins !important;-webkit-font-smoothing: antialiased;top:35%; position:absolute; width: 100%; background:transparent !important; margin-bottom:0rem !important">
<input class="form-control"
id="volunteerCallTextId" type="text" placeholder="Volunteer Call Text"
ng-model="volunteerCallText"
ng-init="volunteerCallText ='Hello, may I speak to (Insured). Hi (Mr., Mrs. Etc), my name is _________.
I am with xxx Insurance and am calling you about the recent fire/flood/weather event in_____.
We are calling to check and see if your family is safe and let you know that xxx is here for you.
I want to let you know that we have emergency claims locations set up at: (use locations below).
Or you can call our Claims center at 888....Please be aware that.....'"
style="width: 75em; height:25em; white-space:pre-line" />
</div>
Format expected:
Hello, may I speak to (Insured). Hi (Mr., Mrs. Etc), my name is
_________.
I am with xxx Insurance and am calling you about the recent fire/flood/weather event in_____. We are calling to check and
see if your family is safe and let you know that xxx is here for you.
I want to let you know that we have emergency claims locations set up
at: (use locations below). Or you can call our Claims center at
888....Please be aware that.....
Can someone suggest what could be done?
I am not sure it can be done in input box or not but it works like this in textarea please try and let me know if t helps you
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="" >
<div style="font-family: Poppins !important;-webkit-font-smoothing: antialiased;top:35%; position:absolute; width: 100%; background:transparent !important; margin-bottom:0rem !important">
<textarea class="form-control"
id="volunteerCallTextId" style="width:75em; height:25em; white-space: pre-wrap;" type="text" placeholder="Volunteer Call Text"
ng-model="volunteerCallText"
ng-init="volunteerCallText ='Hello, may I speak to (Insured). Hi (Mr., Mrs. Etc), my name is _________ \n\
I am with xxx Insurance and am calling you about the recent fire/flood/weather event in_____.\n\
We are calling to check and see if your family is safe and let you know that xxx is here for you.I want to let you know that we have emergency claims locations set up at: (use locations below).Or you can call our Claims center at 888....Please be aware that.....'"
></textarea>
</div>
</div>
</body>
</html>

Waypoints animation issue at 3d.io

The camera animation always starts from the initial camera pose.
We do not want this behaviour.
You can check this issue with:
https://app.3d.io/default_setup.
This code worked before. We didn't change anything.
<a-entity camera="" tour="autoStart: false" wasd-controls="" look-controls="" position="-2.073 1.6 -1.474" rotation="-2.063 203.308 0">
<a-entity tour-waypoint="Top View" io3d-uuid="add7b140-7563-463a-b324-75e2b460e915" position="-7.959815433483447 22.172638840745442 1.675735956699384" rotation="-89.9 450 0"></a-entity>
<a-entity tour-waypoint="Living" io3d-uuid="486a6760-e8d1-456d-a2d0-5358d65b2ef1" position="1.1168750348397785 1.037108274040117 1.7797448740972899" rotation="0 412.98472385428914 0"></a-entity>
<a-entity tour-waypoint="Kitchen" io3d-uuid="4a0f17c1-fcde-4706-9188-48ddeb808927" position="-0.4316313757947364 1.37 0.10205065263211961" rotation="0 491.46180963572306 0"></a-entity>
<a-entity tour-waypoint="Dining" io3d-uuid="5d76c74b-a2b5-4ddf-a6e9-a6fe009377b7" position="-1.0699430785395438 8 -3.5236261145326577" rotation="-38.48648648648648 539.873168157716 0"></a-entity>
<a-entity tour-waypoint="Bedroom" io3d-uuid="4d6fec29-1467-40be-8f91-5435f0317072" position="-9.650512503727434 8 2.1338268605968826" rotation="-59.152761457109314 594.7591069330199 0"></a-entity>
<a-entity tour-waypoint="Bedroom" io3d-uuid="3851ec4b-53c0-47d4-afc2-3d646043eb5d" position="-9.639031885443684 8 5.539305773258945" rotation="-56.77438307873098 400.8960173400832 0"></a-entity>
<a-entity tour-waypoint="Master Bedroom" io3d-uuid="97eabbe1-578a-48ee-a40f-60af0187f2b1" position="-13.334875006116892 8 -1.701906768812833" rotation="-59.08108108108104 494.6322427235562 0"></a-entity>
<a-entity tour-waypoint="Top View" io3d-uuid="fe33bb66-b1fe-4d13-9904-2e98fc05a525" position="-7.959815433483447 22.172638840745442 1.675735956699384" rotation="-89.9 450 0"></a-entity>
</a-entity>
This code doesn't work as desired either. The camera still kept same position.
document.querySelector('[camera]').components['tour'].updateViewPoint({position:{y:1.6}, rotation:{x:0}})
It turns out that there was a somewhat breaking change in aframe-animation-component moving to version 4.x.x and if you find yourself using the following way of including that component:
<script src="https://unpkg.com/aframe-animation-component/dist/aframe-animation-component.min.js"></script>
you wanna change it for this line:
<script src="https://unpkg.com/aframe-animation-component#3.2.5/dist/aframe-animation-component.min.js"></script>
The tour animation will always tween from the current camera position to the next tour point.
So what you want to do is set your camera to the starting position either in aframe source code or programmatically:
<a-entity camera position="x y z"></a-entity>
Or via JavaScript:
document.querySelector('[camera]').setAttribute('position', 'x y z');
Then you can set the next waypoint programmatically:
document.querySelector('[camera]').components['tour'].goTo(waypointUuid)
Or you can start the tour:
document.querySelector('[camera]').components['tour'].playTour()
If this does not work for you please describe your desired outcome and share your code with glitch or app creator.

Resources