I'm working on a Vue project and I want to display images that are stored in Firebase Storage. However, when I put in the downloadURL of an image in a HTML img tag for the source, it doesn't display. Is there a step in between or do I have to change the rules?
img tag result:
img source:
https://firebasestorage.googleapis.com/v0/b/vueauth-9e069.appspot.com/o/user-uploads%2Fimages%2FGitHub-Mark.png?alt=media&token=55ca40dd-58af-46b9-8e7a-1cead6d9c031
Firebase storage rules:
rules_version = '2';
service firebase.storage {
match /b/{bucket}/o {
match /{allPaths=**} {
allow read, write: if request.auth != true;
}
}
}
Related
I need to know how to access the image gallery from a PWA. Currently the PWA will allow me to take pics and upload those on a mobile device but it won't let me access the image gallery and select images. On an actual desktop I can access the image gallery but not from an actual device...I can only access the camera to take photos.
So far I've looked into trying to set my browser to allow access to the image gallery but I don't see a setting on my Chrome browser from my android phone.
Here's the code:
uploadFromFile(event, photoName: string) {
const files = event.target.files;
console.log('Uploading', files);
const file = new Blob([files[0]], { type: 'image/jpeg' });
console.log('file', file);
const { type } = file;
this.imageService.uploadImage(file, photoName, this.currentUser.uid)
.then((url) => {
this.photo0 = url;
console.log('url edit prof', url);
}).catch((error) => {
alert(error.message);
});
}
#capture::file-selector-button {
display: none;
}
#capture {
color: transparent;
}
#capture::before {
content: url("../../../assets/image/SpaghettiPlus2.png");
padding: 140px;
align-items: center;
}
<input type="file" id="capture" accept="image" capture (change)="uploadFromFile($event, 'photo0')" />
It took a while to find this method of uploading pics in a PWA. Using the input for a file picker was the only solution I could find online for allowing PWAs to access pics.
So right now I just want to be able to access the photo gallery on a device in order to upload pics.
The problem is the capture attribute.
According to MDN:
capture was previously a Boolean attribute which, if present, requested that the device's media capture device(s) such as camera or microphone be used instead of requesting a file input.
Also, the value of the accept attribute seems to be wrong (according to MDN). If it doesn't work try accept="image/*" instead.
I work with STM32F429ZI and PlatformIO and i need to upload firmware to specific address like 0x08020000 for example. And I can't find in docs on platformio which key for upload_flags I can use for it, or how I can modify upload_command for it. Thanks.
Right solution is add mbed_app.json to your project root with:
{
"target_overrides": {
"*": {
"target.mbed_app_start" : "0x08020000",
"target.mbed_app_size" : "0x000A0000"
}
}
}
https://os.mbed.com/docs/mbed-os/v5.15/reference/bootloader-configuration.html
This parameters expand to:
MEMORY
{
FLASH (rx) : ORIGIN = 0x8020000, LENGTH = 0xa0000
...
}
on your .ld script and you don't need to change upload_flags and upload_command.
Can I use jQuery to add Removed += 1 like it has been used in the top function? Can I make it only add 1 if the attribute was removed?
window.onload = function() {
let Removed = 0
const anchorElements = document.getElementsByTagName('A')
for (element of anchorElements) {
if (!element.getAttribute('ping')) continue
console.log("Removed ping: " + element.getAttribute('ping'))
element.removeAttribute('ping')
Removed += 1
chrome.extension.sendMessage(Removed)
}
}
link();
function link(){
jQuery("a[onclick*='ga']").removeAttr('onclick');
jQuery("a[onclick*='_gaq.push']").removeAttr('onclick');
jQuery("link[rel*='pingback']").removeAttr('rel');
}
Please note that extensions use dedicated API browserAction.setBadgeText() to interact with the extensions badge from privileged scripts (not content scripts).
JQuery is used in your content and does not have access to above API.
You can use runtime.sendMessage() to pass the request to the background script.
Kotlin has frameworks to represent html, such as kotlinx. How can I represent web component tags in such frameworks? For instance, if I want to use Polymer components, do I have to extend these frameworks to include every Polymer component?
You can Customize Kotlinx (To create a Custom Tag). For a tag called dicom-editor to be used inside divs:
class DicomEditor(consumer: TagConsumer<*>) :
HTMLTag("dicom-editor", consumer, emptyMap(),
inlineTag = true,
emptyTag = false),
HtmlInlineTag {}
fun DIV.dicom_editor(block: DicomEditor.() -> Unit = {}) {
DicomEditor(consumer).visit(block)
}
...
div{
dicom_editor {
onMouseDownFunction = {_ ->
window.alert("Dicom Editor")
}
}
}
In the example above, the dicom_editor call includes a callback for the mouse down event. You can also add atributes: attributes["data-toggle"] = "dropdown"
You can add attributes as fields:
class DicomEditor(consumer: TagConsumer<*>) :
HTMLTag("dicom-editor", consumer, emptyMap(),
inlineTag = true,
emptyTag = false),
HtmlInlineTag {
var data_toggle: String = ""
set(x) {attributes["data-toggle"] = x}
}
fun DIV.dicom_editor(block: DicomEditor.() -> Unit = {}) {
DicomEditor(consumer).visit(block)
}
...
div{
dicom_editor {
data_toggle = "dropdown"
}
}
In the Kotlin code, you have to use _ in the place of - or you get an error.
It is possible to use Vaadin 10 to control (Polymer-based) web components from server-side Java. Events are fully supported, please read the docs on how to wrap Web Component in a Java API.
There is a Kotlin integration with Vaadin 10 ready:
The Vaadin-on-Kotlin (VoK) framework; there are nice guides for Vaadin 10 to get you started there.
An example project built on VoK: Vaadin-Kotlin-PWA. This project demoes usage of AppLayout Web Component: AppLayout.kt.
The example code which uses the AppLayout layout and shows the basic page:
#BodySize(width = "100vw", height = "100vh")
#HtmlImport("frontend://styles.html")
#Viewport("width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes")
#Theme(Lumo::class)
class MainLayout : AppHeaderLayout(), RouterLayout {
private val content: Div
init {
appHeader {
appToolbar {
title.text = "Vaadin Kotlin PWA Demo"
paperIconButton(VaadinIcons.FILE_REMOVE) {
addClickListener {
Notification.show("A toast!", 3000, Notification.Position.BOTTOM_CENTER)
}
}
}
}
appDrawer {
navMenuItem(VaadinIcons.LIST, "Task List")
navMenuItem(VaadinIcons.COG, "Settings")
navMenuItem(VaadinIcons.QUESTION, "About")
}
content = div {
setSizeFull(); classNames.add("app-content")
}
}
override fun showRouterLayoutContent(content: HasElement) {
this.content.element.appendChild(content.element)
}
}
Disclaimer: I'm the author of VoK
You can create XSD file for your components and generate them automatically. It's exactly how kotlinx do it.
Generator is part of the project. Check it out here: https://github.com/Kotlin/kotlinx.html/tree/master/generate
There is also the source XSD file for HTML5 in resource folder:
https://github.com/Kotlin/kotlinx.html/blob/master/generate/src/main/resources/html_5.xsd
I wanted to save the google map into an image from a webpage.
while i was searching for that i got this program.
http://www.codres.de/downloads/gms.exe[^]
besides other alternatives like print screen i wanted to use a program or map api which can save a specified dimension of google map instead of the screen.
i have used browser component in c# for http access and for displaying certain webpages.
I want to know whether there are options to capture the browser screen to image using any c# functionality or even the browser component would have given such options. just a guess.
i would like to have answers, suggestions on how to capture the map with custom dimension and zoom size to an image.
I used this to get captcha Image from the current page, so you can use similar code just amend the imageID to point to the google map image and use this solution for zooming.
public string newsavefunction(WebBrowser webBrowser1)
{
IHTMLDocument2 doc = (IHTMLDocument2)webBrowser1.Document.DomDocument;
IHTMLControlRange imgRange = (IHTMLControlRange)((HTMLBody)doc.body).createControlRange();
string imagename = string.Empty;
try
{
foreach (IHTMLImgElement img in doc.images)
{
imgRange.add((IHTMLControlElement)img);
imgRange.execCommand("Copy", false, null);
using (Bitmap bmp = (Bitmap)Clipboard.GetDataObject().GetData(DataFormats.Bitmap))
{
bmp.Save(#"F:\captchaimages\captchapic.jpg");
}
imagename = img.nameProp;
break;
}
}
catch (System.Exception exp)
{ }
return imagename;
}