I can't figure out how to track the User Location via GPS.
This code can I add in my Mapbox:
const geolocate = (new mapboxgl.GeolocateControl({
positionOptions: {
enableHighAccuracy: true
},
trackUserLocation: true
}));
map.addControl(geolocate)
But it doesn't show it in iOS. What to do? Maybe add some Ionic/Cordova tricks?
Maybe this helps:
Not all browsers support geolocation, and some users may disable the
feature. Geolocation support for modern browsers including Chrome
requires sites to be served over HTTPS. If geolocation support is not
available, the GeolocateControl will not be visible.
from:
https://docs.mapbox.com/mapbox-gl-js/api/#geolocatecontrol
Are you loading the mapbox-gl css? Without the css files the markers and controls are invisible.
You might need to add this line in angular.json:
{
...
"projects": {
"app": {
...
"architect": {
"build": {
...
"options": {
...
"styles": [
...
},
{
"input": "node_modules/mapbox-gl/dist/mapbox-gl.css"
}
Related
I'm trying to make the Google Smart Home API work on Gladys Assistant (it's an open-source home automation software), and I struggle to make Google Integrations tests pass.
This is my onSync:
onSync
{
"requestId": "9164924531720238290",
"payload": {
"agentUserId": "9aba8230-9e8d-47b7-9d1c-f4dd8725aad3",
"devices": [
{
"id": "mqtt-lamp-temperature",
"type": "action.devices.types.LIGHT",
"traits": [
"action.devices.traits.ColorSetting",
"action.devices.traits.Brightness",
"action.devices.traits.OnOff"
],
"name": {
"name": "Lampe Temperature"
},
"attributes": {
"colorModel": "rgb",
"colorTemperatureRange": {
"temperatureMinK": 2000,
"temperatureMaxK": 9000
}
},
"deviceInfo": {
"model": null
},
"roomHint": "Grand Salon",
"willReportState": true
}
]
}
}
This is what I'm sending to reportState:
reportState
{
online: true,
color: { temperatureK: 3000, spectrumRgb: 8388863 },
on: true
}
This is what the onQuery is returning to the Google API:
onQuery
{
'mqtt-lamp-temperature': {
online: true,
color: { temperatureK: 3000, spectrumRgb: 8388863 },
on: true
}
}
But this is what Google sees in the integrations tests:
AssertionError: Expected state to include:
{"color":{"temperatureK":{"xRange":[2600,3200]}}},
actual state: {"color":{"spectrumRGB":8388863},"on":true,"online":true}: expected false to be true
It seems Google completely ignores the temperatureK attribute when the spectrumRgb attribute is here.
To confirm my theory, I tried to create a lamp that has only spectrumRgb and a light that has only temperatureK, and then it works perfectly. The problem is, in that case, some tests are skipped and I think I won't get validated by Google with that.
My question is:
Why does those attributes do not work together? Can't a light be controlled by its temperature and by it's RGB ?
Do you see anything weird in my implementation?
Thanks a lot for your help!
From the docs:
Color temperature is a linear scale and a subset of the RGB/HSV full spectrum color models.
You're currently trying to send two different color settings to your light (orange-ish in kelvin, deep pink in rgb), which is part of the issue you're running into.
You have set your device up in your SYNC to support both RGB and temperature, but in your QUERY/EXECUTE intents, you need to send either temperatureK or rgb spectrum values, not both.
Hi Your JSON format of Query and ReportState is different, include the device id in the ReportState as well, read the google report state docs for more info.
I add the Modes trait and some settings to my device, but the UI doesn't show any option. Also I have tried with Toogle trait and it doesn't show it either.
(I have my assistant in Spanish, and when I select the supported language in the SYNC, I specified 'es' tag).
This is my SYNC response:
{
"requestId":"8280087254750701149",
"payload":{
"agentUserId":2,
"devices":[{
"id":"34",
"type":"action.devices.types.OUTLET",
"traits":["action.devices.traits.OnOff","action.devices.traits.Modes"],
"attributes":{
"availableModes":[{
"name":"auxiliar",
"name_values":[{
"name_synonym":["auxiliar"],
"lang":"es"
}],
"settings":[{
"setting_name":"encendido",
"setting_values":[{
"setting_synonym":["encendido"],
"lang":"es"
}]
},
{
"setting_name":"apagado",
"setting_values":[{
"setting_synonym":["apagado"],
"lang":"es"
}]
},
{
"setting_name":"suspendido",
"setting_values":[{
"setting_synonym":["suspendido"],
"lang":"es"
}]
}],
"ordered":true
}]
},
"name":{
"defaultNames":["EVVC200000091"],
"name":"Cargador laboratorio",
"nicknames":["cargador_labo"]
},
"willReportState":true,
"deviceInfo":{
"manufacturer":"Orbis",
"swVersion":"00.01.31"
},
"customData":{
"serial":"EVVC200000091",
"fooValue":74,
"barValue":true,
"bazValue":"foo"
}
}]
}
}
This is my QUERY response:
{"requestId":"15972376619501000208","payload":{"devices":{"34":{"currentModeSettings":{"auxiliar":"encendido"},"on":true}}}}
And the UI not show any option:
enter image description here
Not every device trait is supported on every surface with touch controls. You should look at the documentation for touch controls. Note that Modes and Toggles are not on the list for supported traits.
There are about ten tiles in our fiori app, and I put my shared files in /common, the following image shows the project structure(/analytics, /appsettings... are all tiles except /common):
Many i18n are the same between the tiles, so I want to maintain all i18n in /common.
In /analytic/webapp/Component.js, I defined i18n resource:
init: function() {
UIComponent.prototype.init.apply(this, arguments);
// resourceroots is also defined in manifest.json,
// why I defined resourceroots thrice is another topic, it's stupid, I know
jQuery.sap.registerModulePath("myprojectcommon", "./../../common");
jQuery.sap.registerModulePath("myproject.common", "/myproject/resources/common/");
myprojectcommon.util.Utils.setComponent(this);
var setComponentCommonResource = myprojectcommon.util.Utils.setCommonResource.bind(this);
setComponentCommonResource();
}
/common/util/Utils:
setCommonResource: function() {
var i18nModel = new sap.ui.model.resource.ResourceModel({
bundleName: "myproject.common.i18n.i18n"
});
this.setModel(i18nModel, "i18n");
}
Now the common i18n is loaded, but i18n defined in manifest.json failed, such as
"sap.app": {
"title": "{{appTitle}}",
"description": "{{appDescription}}"
}
Which results:
What should I do?
There seems no API to set title in Component.js: https://sapui5.hana.ondemand.com/#/api/sap.ui.core.UIComponent
Related questions: One app with multiple component.js: How to load shared modules?
fixed by
"sap.app": {
"i18n": "./../../common/i18n/i18n.properties"
}
"sap.ui5": {
"resourceRoots": {
"myprojectcommon": "./../../common/"
},
"models": {
"i18n": {
"type": "sap.ui.model.resource.ResourceModel",
"settings": {
"bundleName": "myprojectcommon.i18n.i18n"
}
},
}
below is how ui5 load i18n files location:
https://github.com/SAP/openui5/blob/c014e24356497a44125c1dd5419fdf536119600e/src/sap.ui.core/src/sap/ui/core/Manifest.js#L200
How can I add a data source hosted Mapbox into a mapbox-gl-js project?
It used to be like this: http://bit.ly/1LcwekS way back in V.2.1
var sourceObj = new mapboxgl.Source({
type: 'vector',
url: 'mapbox://foo-bar.ci58c127'
});
but mapboxgl.Source is no longer supported in mapboxgl.Source version 8.0
The new way to do this is via Map#addSource:
map.addSource('foo-bar.ci58c127', {
type: 'vector',
url: 'mapbox://foo-bar.ci58c127'
});
The first argument is the source ID, which you can use when adding layers:
map.addLayer({
"id": "markers",
"type": "symbol",
"source": "foo-bar.ci58c127",
"layout": { ... },
"paint": { ... }
});
Whenever there are breaking changes in a release, we add details about them in the CHANGELOG, so if you come across any other upgrade issues that's the place to look. We're also planning to pull that content directly into the API documentation.
I'm writing an application which should embed specific website into a <webview> and inject some CSS and JS code to adapt this website for viewing on certain touch-sensitive device.
The problem is that I can't find a way to inject my code when page is loaded, instead the code is injected AFTER the page is rendered and, as result, all modifications become visible.
While code injection perfectly works with chrome extensions and content script (by setting run_at attribute to document_end on manifest.json, this is not the case for webviews.
This is my code:
manifest.json
{
"name": "App",
"version": "0.0.1",
"manifest_version": 2,
"app": {
"background": {
"scripts": [ "main.js" ]
}
},
"permissions": [
"webview"
]
}
main.js
chrome.app.runtime.onLaunched.addListener(function() {
chrome.app.window.create('index.html', { state: "normal" },
function(win) {
win.contentWindow.onload = function() {
var wv = this.document.querySelector('webview');
wv.addEventListener('contentload', function(e) {
this.insertCSS({ code: "body { background: red !important; }" });
});
}
}
);
});
index.html
<webview src="https://developer.chrome.com/apps/tags/webview" style="width: 100%; height: 100%;"></webview>
The same on the Gist: https://gist.github.com/OnkelTem/ae6877d2d7b2bdfea5ae
If you try this app, you will see that only after the webview is loaded and fully rendered my CSS rule is applied and the page background becomes red. In this example I use contentload webview event, but I also tried all other webview events: loadstart, loadstop, loadcommit - with no any difference.
I tried also using webview.contentWindow, but this is object is EMPTY all the time, despite documentation states it should be used.
Any ideas? Is it possible at all?
First of all, use the loadcommit event instead of the contentload event.
Second, add runAt: 'document_start' to the webview.insertCSS call (this also applies to webview.executeScript, if you ever want to use it). The implementation of executeScript is shared with the extension's executeScript implementation, but unfortunately the app documentation is incomplete. Take a look at chrome.tabs.insertCSS until the app documentation is fixed.
Here is an example that works as desired:
chrome.app.runtime.onLaunched.addListener(function() {
chrome.app.window.create('index.html', { state: 'normal' },
function(win) {
win.contentWindow.onload = function() {
var wv = this.document.querySelector('webview');
// loadcommit instead of contentload:
wv.addEventListener('loadcommit', function(e) {
this.insertCSS({
code: 'body { background: red !important; }',
runAt: 'document_start' // and added this
});
});
}
}
);
});
Note: Although the previous works, I recommend to put the script that manipulates the webview in index.html, because the resulting code is much neater.
// main.js
chrome.app.runtime.onLaunched.addListener(function() {
chrome.app.window.create('index.html', { state: 'normal' });
});
<!-- index.html -->
<webview src="https://developer.chrome.com/apps/tags/webview" style="width: 100%; height: 100%;"></webview>
<script src="index.js"></script>
// index.js
var wv = document.querySelector('webview');
wv.addEventListener('loadcommit', function() {
wv.insertCSS({
code: 'body { background: red !important; }',
runAt: 'document_start'
});
});