Waypoints animation issue at 3d.io - archilogic

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.

Related

CefSharp loads really slow- takes 40 seconds to show up inside a WPF app in a specific customer's VM

We are running a WPF app and have CefSharp control embedded inside it.
The app works fine in most the machines but takes about 30-40 seconds to load in on a specific customer's VM.
We already tried:
CefSharp argument no-proxy-server set to 1
The Minimal CefSharp example loads up quickly (3-4 seconds).
Upgraded the Intel graphics driver
Enabled the CefSharp logs, but couldn't guess much from it. Here's the debug.log from a run which took > 40 seconds to show up:
[0512/090835.087:VERBOSE1:pref_proxy_config_tracker_impl.cc(186)] 3FE40680: set chrome proxy config service to 3FD043C0
[0512/090835.115:VERBOSE1:webrtc_internals.cc(118)] Could not get the download directory.
[0512/090835.116:VERBOSE1:media_stream_manager.cc(705)] MSM::InitializeMaybeAsync([this=3FD15080])
[0512/090835.117:VERBOSE1:media_stream_manager.cc(705)] MDM::MediaDevicesManager()
[0512/090835.117:VERBOSE1:media_stream_manager.cc(705)] MSM::MediaStreamManager([this=3FD15080]))
[0512/090835.739:VERBOSE1:pref_proxy_config_tracker_impl.cc(186)] 3FE41EE0: set chrome proxy config service to 3FD040F0
[0512/090840.931:VERBOSE1:video_capture_oracle.cc(96)] Capture size auto-throttling is now enabled.
[0512/090840.932:VERBOSE1:video_capture_oracle.cc(124)] Capture size auto-throttling is now disabled.
[0512/090840.933:VERBOSE1:capture_resolution_chooser.cc(205)] Recomputed snapped frame sizes: 1928x1013
[0512/090840.933:VERBOSE1:capture_resolution_chooser.cc(157)] Recomputed capture size from 640x360 to 1928x1013 (100% of ideal size)
[0512/090854.178:INFO:cpu_info.cc(53)] Available number of cores: 8
[0512/090854.221:VERBOSE1:media_stream_manager.cc(705)] RFAOSF::Core() [process_id=4, frame_id=1]
[0512/090854.222:VERBOSE1:document.cc(3712)] Document::DispatchUnloadEvents() URL = <null>
[0512/090854.222:VERBOSE1:document.cc(3792)] Actually dispatching an UnloadEvent: URL = <null>
[0512/090854.231:VERBOSE1:media_stream_manager.cc(705)] RFAOSF::Core() [process_id=4, frame_id=1]
[0512/090854.248:VERBOSE1:script_context.cc(189)] Created context:
extension id: (none)
frame: 54CA2018
URL:
context_type: WEB_PAGE
effective extension id: (none)
effective context type: WEB_PAGE
[0512/090854.249:VERBOSE1:script_context.cc(189)] Created context:
extension id: (none)
frame: 00000000
URL:
context_type: UNSPECIFIED
effective extension id: (none)
effective context type: UNSPECIFIED
[0512/090854.249:VERBOSE1:dispatcher.cc(434)] Num tracked contexts: 1
[0512/090854.682:VERBOSE1:capture_resolution_chooser.cc(205)] Recomputed snapped frame sizes: 1928x1013
[0512/090854.769:VERBOSE1:layout_shift_tracker.cc(365)] in "local://formdisplay.html/", 57020540:LayoutNGBlockFlow (positioned) ::before moved from "-555.25,0 723.438x4" to "-326.25,0 816.797x4" (visible from "0,0 168x4" to "0,0 491x4")
[0512/090854.770:VERBOSE1:layout_shift_tracker.cc(547)] in "local://formdisplay.html/", viewport was 0.10056% impacted with distance fraction 0.118776 and subframe weighting factor 1
[0512/090854.770:VERBOSE1:layout_shift_tracker.cc(626)] in "local://formdisplay.html/", layout shift of 0.000119441 reported; cumulative score is 0.000119441
[0512/090854.897:VERBOSE1:layout_shift_tracker.cc(365)] in "local://formdisplay.html/", 57020540:LayoutNGBlockFlow (positioned) ::before moved from "-325.516,0 816.797x4" to "-59.5156,0 925.453x4" (visible from "0,0 491x4" to "0,0 866x4")
[0512/090854.898:VERBOSE1:layout_shift_tracker.cc(547)] in "local://formdisplay.html/", viewport was 0.177362% impacted with distance fraction 0.137967 and subframe weighting factor 1
[0512/090854.898:VERBOSE1:layout_shift_tracker.cc(626)] in "local://formdisplay.html/", layout shift of 0.000244701 reported; cumulative score is 0.000364142
[0512/090854.901:VERBOSE1:layout_shift_tracker.cc(365)] in "local://formdisplay.html/", 57020540:LayoutNGBlockFlow (positioned) ::before moved from "-60.0469,0 925.453x4" to "-9.04688,0 946.047x4" (visible from "0,0 865x4" to "0,0 937x4")
[0512/090854.902:VERBOSE1:layout_shift_tracker.cc(547)] in "local://formdisplay.html/", viewport was 0.191904% impacted with distance fraction 0.0264523 and subframe weighting factor 1
[0512/090854.902:VERBOSE1:layout_shift_tracker.cc(626)] in "local://formdisplay.html/", layout shift of 5.07629e-05 reported; cumulative score is 0.000414905
[0512/090854.923:VERBOSE1:layout_shift_tracker.cc(365)] in "local://formdisplay.html/", 57020F00:LayoutNGBlockFlow (relative positioned) DIV id='e85pk6q' class='form-group has-feedback formio-component formio-component-button formio-component-submit' moved from "35,114 1858x34" to "35,118 1858x38" (visible from "35,114 1858x34" to "35,118 1858x38")
[0512/090854.924:VERBOSE1:layout_shift_tracker.cc(365)] in "local://formdisplay.html/", 5703C2C0:LayoutNGButton BUTTON class='btn btn-primary btn-md' moved from "35,114 69.5781x34" to "35,118 69.5781x38" (visible from "35,114 70x34" to "35,118 70x38")
[0512/090854.924:VERBOSE1:layout_shift_tracker.cc(547)] in "local://formdisplay.html/", viewport was 3.99557% impacted with distance fraction 0.00207469 and subframe weighting factor 1
[0512/090854.924:VERBOSE1:layout_shift_tracker.cc(626)] in "local://formdisplay.html/", layout shift of 8.28956e-05 reported; cumulative score is 0.000497801
[0512/090901.150:VERBOSE1:statistics_recorder.cc(471)] Collections of all histograms

How to use linearGradient in react-native-svg

I have some SVG graphics that I would like to apply conditional styling on (e.g. linearGradient when it's active). How would I go about achieving this? I'd rather not (if there's another way) have to go in a manually add a defs tag with linearGradients in there, and I've seen stuff about using an externals defs file to access the fill I want (so I can specify either a solid color or gradient depending on state). I'm not sure how to ask, or where to look.
An example:
An SVG file:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26">
<path d="M20.94 9.56c.74 0 1.35.62 1.35 1.38v1.84c0 3.79-2.48 7.85-6.44 8.81v1.36A3.02 3.02 0 0 1 12.88 26a3.02 3.02 0 0 1-2.97-3.05v-1.34c-3.36-.83-6.2-5.05-6.2-8.83v-1.84c0-.76.6-1.38 1.35-1.38.74 0 1.34.62 1.34 1.38v1.84a6.7 6.7 0 0 0 6.6 6.79 6.7 6.7 0 0 0 6.6-6.79v-1.84c0-.76.6-1.38 1.34-1.38ZM13.08 0c2.77 0 5 2.28 5 5.09v7.44c0 2.8-2.23 5.08-5 5.08-2.76 0-5-2.28-5-5.08V5.09a5.05 5.05 0 0 1 5-5.09Z" fill-rule="evenodd"/>
</svg>
Now - I have a LOT of these, so I was hoping I could link the gradient from an external source, or use some other way to just slap a linear gradient on top of them. Is there such a way? What would be the best way to add gradients to 100+ icons without having to go in and edit each one of them? Is there a bulk editor somewhere that I don't know about?

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)

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

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>

SVG filter fails to render in Firefox and prevents fill attribute from being applied

I am having the weirdest problem with an svg filter and I'm not sure how to debug the problem or what the fix might be.
I have a drop shadow filter that I'm applying to a circle. Here is the SVG markup that I'm using (only showing one arc of the donut chart for brevity):
<svg height="240" width="240">
<defs>
<filter width="130%" height="130%" id="dropshadow">
<feGaussianBlur stdDeviation="1" result="blur-out" in="SourceAlpha">
</feGaussianBlur>
<feOffset result="shadow-out" dy="2" dx="1" in="blur-out">
</feOffset>
<feColorMatrix result="color-out" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .3 0" type="matrix" in="shadow-out">
</feColorMatrix>
<feBlend mode="normal" in2="color-out" in="SourceGraphic">
</feBlend>
</filter>
</defs>
<g transform="translate(120,120)" class="donut">
<g class="arcs">
<g class="arc">
<path d="M-63.63961030678927,-63.63961030678928A90,90 0 1,1,-29.811356451234897,84.91927358696267L-27.492695393916627,78.31444119686557A83,83 0 1,0 -58.68986283848344,-58.68986283848345Z" class="a"></path>
<circle transform="translate(91.16631091370033,-20.75942567573879)" filter="url(#dropshadow)" r="17" class="a"></circle>
<text transform="translate(91.16631091370033,-20.75942567573879)" text-anchor="middle" dy=".35em" class="chart-label">30</text>
</g>
</g>
</g>
</svg>
This is how it renders in Internet Explorer, Chrome, and Firefox:
However, when I add the chart to my application which uses angularjs/bootstrap and open it up with Firefox it renders like this:
The drop shadow is no longer working and neither is the fill color for the circle. Even if I select the element and apply a fill directly, it still doesn't work. However, if I delete the filter from the circle (fill="url(#dropshadow)"), the fill color starts working again. Note that the chart renders correctly in all other browsers.
What could be causing the fill to suddenly stop working only in Firefox and only when added to my angularjs/bootstrap project?
When you re-add the filter using inline css (style="filter:...").
Does it work again then?

Resources