Extract link from html in flutter - html

I am trying to extract a link from an HTML body which is coming from a response . Then message looks like this "content":
{
"rendered":
"<div style=
"padding: 56.25% 0 0 0;
position: relative;">
<iframe style=
"position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;"
title="Shrewsberry"
src="https://player.vimeo.com/video/1000224?h=23334&badge=0&autopause=0&player_id=0&app_id=58479\"
frameborder="0"
allowfullscreen="allowfullscreen">
</iframe>
</div>"}
I want to get the content inside 'src="https://player.vimeo.com/video/1000224?' can anyone help .
This is my code which i use
final value = parse(html); // html is the value from response
String parsedString = parse(value.body!.text).documentElement!.text;
print(parsedString);

You can use this simple logic if your URL always ends with ?
void main(){
String x='"content": { "rendered": "<div style="padding: 56.25% 0 0 0; position: relative;"><iframe style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" title="Shrewsberry" **src="https://player.vimeo.com/video/1000224?**h=23334&badge=0&autopause=0&player_id=0&app_id=58479" frameborder="0" allowfullscreen="allowfullscreen">\n"}';
int start= x.indexOf('src');
int end= x.indexOf('?');
print(x.substring(start,end+1));
}

You can use Regex to extract the string from your original string. Given the fact that it looks like HTML I ignored the ** you put in your answer.
In that case the regex (?<=src=").*?(?=") should work to retrieve the source. This will work for any source, not just Vimeo.
import 'dart:convert';
void main() {
String input = "\"content\": { \"rendered\": \"<div style=\"padding: 56.25% 0 0 0; position: relative;\"><iframe style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%;\" title=\"Shrewsberry\" **src=\"https://player.vimeo.com/video/1000224?\"h=23334&badge=0&autopause=0&player_id=0&app_id=58479\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\">\n\"}";
RegExp regex = new RegExp('(?<=src=").*?(?=")');
var match = regex.firstMatch(input);
if (match == null) {
print("No match found.");
return;
}
print("Result: " + match.group(0)!);
}
Output: Result: https://player.vimeo.com/video/1000224?

Related

CSS styles are removed when served by ESP8266 running an ESPAsyncWebServer

Tried to position text In an Image exactly like in the example from w3schools.
It works fine in my space at w3schools. When I look at the css in the browser:
.container {
position: relative;
}
.center {
position: absolute;
top: 50%;
width: 100%;
text-align: center;
font-size: 18px;
}
img {
width: 100%;
height: auto;
}
But when the exact same html + css code is running on the esp8266 nodeMCU, the positioning fails. Like Ben T stated, the width style is missing.
.container {
position: relative;
}
.center {
position: absolute;
top: 50;
text-align: center;
font-size: 18px;
}
img {
width: 100%;
height: auto;
}
So something goes wrong in the css-class "center".
This is the Code running on the esp8266.
The html file right now is in the same file.
The css-positioning also fails with the temperature string.
#include <Arduino.h>
#include <ESP8266WiFi.h>
#include <Hash.h>
#include <ESPAsyncTCP.h>
#include <ESPAsyncWebServer.h>
#include <Adafruit_Sensor.h>
#include "LittleFS.h"
const char* ssid = "ESP8266-Access-Point";
const char* password = "123456789";
// hard coded current temperature & humidity
float t = 15.1;
float h = 55.5;
AsyncWebServer server(80);
const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE HTML><html>
<head>
<style>
.container {
position: relative;
}
.center {
position: absolute;
top: 50%;
width: 100%;
text-align: center;
font-size: 18px;
}
img {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<h2>Image Text</h2>
<p>Center text in image:</p>
<div class="container">
<img src="camper" alt="Cinque Terre" width="1000" height="300">
<div class="center">Centered</div>
</div>
</body>
</html>)rawliteral";
// Replaces placeholder with DHT values
String processor(const String& var){
//Serial.println(var);
if(var == "TEMPERATURE"){
return String(t);
}
else if(var == "HUMIDITY"){
return String(h);
}
return String();
}
//background-image: url(\"camper\")
void setup(){
Serial.begin(115200);
WiFi.softAP(ssid, password);
IPAddress IP = WiFi.softAPIP();
Serial.print("AP IP address: ");
Serial.println(IP);
if(!LittleFS.begin()){
Serial.println("An Error has occurred while mounting SPIFFS");
return;
}
File camper = LittleFS.open("/camper.png", "r");
Serial.println(WiFi.localIP());
// Route for root / web page
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
request->send_P(200, "text/html", index_html, processor);
});
server.on("/camper", HTTP_GET, [](AsyncWebServerRequest *request){
request->send(LittleFS, "/camper.png", "image/png");
});
server.on("/temperature", HTTP_GET, [](AsyncWebServerRequest *request){
request->send_P(200, "text/plain", String(t).c_str());
});
server.on("/humidity", HTTP_GET, [](AsyncWebServerRequest *request){
request->send_P(200, "text/plain", String(h).c_str());
});
server.begin();
}
void loop(){
}
Has somebody experienced something like this before?
Thanks in advance for any kind of hints ;)
A template processor is used in:
request->send_P(200, "text/html", index_html, processor);
and from https://github.com/me-no-dev/ESPAsyncWebServer#template-processing
Placeholders are delimited with % symbols. Like this: %TEMPLATE_PLACEHOLDER%.
So all of the % characters in the index_html string literal need to be escaped. e.g.:
top: 50%%;
width: 100%%;
Otherwise the ESPAsyncWebServer template processing will treat the characters between % characters as a placeholder.
i.e. the text %;\n width: 100% is treated as a placeholder. Your processor() function only replaces the TEMPERATURE and HUMIDITY placeholders and any other placeholder is replaced by an empty string.
This means this CSS:
top: 50%;
width: 100%;
is replaced with:
top: 50;
This general problem is described in the issue https://github.com/me-no-dev/ESPAsyncWebServer/issues/644.

Toggle HTML using a button in tampermonkey

I have been trying to get a script working to toggle a piece of HTML when i toggle a button,
But so far i have not been able to get it working,
let newImg5 = document.createElement("img");
newImg5.src = "https://www.pcinvasion.com/wp-content/uploads/2016/12/discord.jpg";
newImg5.style = `position: absolute; bottom: 15px; left: 15px; z-index: 100000; width: 50px; height: 50px; cursor: pointer;`;
document.body.prepend(newImg5);
newImg5.addEventListener("click", () => {
toggle.html <iframe src="https://discordapp.com/widget?id=68awdawdawdawds8&theme=dark" width="350" height="500" allowtransparency="true" frameborder="0"></iframe>
});
It sounds like you want to do something like this:
let newImg5 = document.createElement("img");
newImg5.src = "https://www.pcinvasion.com/wp-content/uploads/2016/12/discord.jpg";
newImg5.style = `position: absolute; bottom: 15px; left: 15px; z-index: 100000; width: 50px; height: 50px; cursor: pointer;`;
document.body.prepend(newImg5);
/* create iframe */
let iframe = document.createElement('iframe');
iframe.setAttribute('id', 'iframe');
iframe.setAttribute('src', 'https://discordapp.com/widget?id=68awdawdawdawds8&theme=dark');
iframe.setAttribute('width', '350');
iframe.setAttribute('height', '500');
iframe.setAttribute('allowtransparency', 'true');
/* Make iframe appear on click */
newImg5.addEventListener("click", () => {
document.body.append(iframe);
});

Button to hide HTML Tampermonkey

Hello im trying to get a code working for tampermonkey, Where if you click a button it will hide a piece of HTML and when you click it again it shows up again.
let newImg4 = document.createElement("img");
newImg4.src = "https://image.flaticon.com/icons/png/512/63/63801.png";
newImg4.style = `position: absolute; bottom: 290px; right: 20px; z-index: 100000; width: 50px; height: 50px; cursor: pointer;`;
document.body.prepend(newImg4);
newImg4.addEventListener("click", () => {
let w = HIDE HTML HERE!("<iframe src="https://discordapp.com/widget?id=yesihavetheidijuswanttokeepittomyselffornow&theme=dark" width="350" height="500" allowtransparency="true" frameborder="0"></iframe>");
});
Any help would be greatly appriciated!
Thanks in advance.
You have to first get the iframe (the comment from Hisham missed that), and then set its display style to none.
let newImg4 = document.createElement("img");
newImg4.src = "https://image.flaticon.com/icons/png/512/63/63801.png";
newImg4.style = `position: absolute; bottom: 290px; right: 20px; z-index: 100000; width: 50px; height: 50px; cursor: pointer;`;
document.body.prepend(newImg4);
var elem = document.getElementsByTagName("iframe")[0];
newImg4.addEventListener("click", () => { if (elem.style.display === "none") { elem.style.display = "block"; } else { elem.style.display = "none"; } });
<iframe src="https://discordapp.com/widget?id=yesihavetheidijuswanttokeepittomyselffornow&theme=dark" width="350" height="500" allowtransparency="true" frameborder="0"></iframe>

Disabling HTML PDF Viewer Object

I have embedded a PDF viwer in my page and would like to disable the object in such a way that it's not possible to interact with it (no scrolling, no zoom in/out). My html object looks like this:
<div id="pdf">
<object width="650" height="500" type="application/pdf" data="./forms/my.pdf?#zoom=45&scrollbar=0&toolbar=0&navpanes=0" id="pdf_content">
<p>PDF could not be loaded.</p>
</object>
</div>
Is it even possible to disable the object?
If your PDF is rendering as intended on page load and you simply want to prevent mouse interaction, you can cover it up with an invisible element like so with CSS:
#pdf {
position: relative;
}
#pdf::before {
content: '';
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
z-index: 1;
background: rgba(0, 0, 0, .3);
}
And per your request, a way to toggle this on/off (using jQuery):
$('#toggle').on('click', function() {
if ($('#pdf').hasClass('enable')) {
$('#pdf').removeClass('enable').on('mousedown scroll', function() { return false; });
$(this).text('Enable PDF Interaction');
} else {
$('#pdf').addClass('enable').off();
$(this).text('Disable PDF Interaction');
}
});
#pdf {
position: relative;
/* sizes for example since PDF won't load: */
width: 650px;
height: 500px;
}
#pdf::before {
content: '';
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
z-index: 1;
background: rgba(0, 0, 0, .3);
}
#pdf.enable::before {
content: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="toggle">Disable PDF Interaction</button>
<div id="pdf" class="enable">
<object width="650" height="500" type="application/pdf" data="https://upload.wikimedia.org/wikipedia/en/d/dc/Convergent_Synthesis_Example.pdf" id="pdf_content">
<p>PDF could not be loaded.</p>
</object>
</div>

GWT - Make CellTable Cell use HTML?

I have a CellTable where I want to put HTML-code in the cells.
The following code is not working, the blank spaces are removed from the output.
TextColumn<MyCell> column1 = new TextColumn<MyCell>()
{
#Override
public String getValue(MyCell myCell)
{
String result = " " +myCell.getValue();
return result;
}
};
table.addColumn(column1 , "Header1");
I know this could be done using css but I just want to know how to put HTML-code in the cells. Any help is appreciated!
AFAIK additional whitespace is ignored in HTML - you should use pre tag to maintain formatting.Anyway please find my column sample below. It generates nice progress bar from values contained in objects backed by data provider.
final SafeHtmlCell progressCell = new SafeHtmlCell();
Column<UiScheduledTask, SafeHtml> progressCol = new Column<UiScheduledTask, SafeHtml>(
progressCell) {
#Override
public SafeHtml getValue(UiScheduledTask value) {
SafeHtmlBuilder sb = new SafeHtmlBuilder();
float percent = new Float(value.getCompleted())
/ new Float(value.getAll());
int rounded = Math.round(percent * 100);
sb.appendHtmlConstant("<div style='width: 100px; height: 20px; position: relative;'>");
sb.appendHtmlConstant("<div style='z-index: 2; display: inline; width: 100px; position: absolute; left: 0px, top: 0px; text-align: center;'>"
+ value.getCompleted()
+ "/"
+ value.getAll()
+ "</div>");
sb.appendHtmlConstant("<div style='position: absolute; left: 0; top: 0; width: 100px; z-index: 1'><div style='display: inline; float: left; width: "
+ rounded
+ "%; height: 20px; background-color: #82cd80;'></div>");
sb.appendHtmlConstant("<div style='display: inline; float: right; width: "
+ (100 - rounded)
+ "%; height: 20px; background-color: #c54c4d;'></div></div>");
sb.appendHtmlConstant("</div>");
return sb.toSafeHtml();
}
};