If I paste the output of an HTML-based design tool into Mangel Maxime's (or, Maxime Mangel's?) HTML-to-Fable/Elmish Convertor, will that output work if provided to Giraffe's ViewEngine (i.e. HTML DSL)?
Superficially, both formats look very similar, and it would be great if this happened to work.
no it wont work the DSL are differents:
For exemple for this HTML page:
<!DOCTYPE html>
<html lang="en-EN">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://an_url/file.css">
<link rel="shortcut icon" type="image/png" href="/favicon.png">
</head>
<body>
<div id="elmish-app"></div>
<script>var __INIT_STATE__ = "{\"SomeValueKey\":\"SomeValue\",\"AnotherValueKey\":\"AnotherValue\"}"</script><script src="http://localhost:8080/app.js"></script>
<script src="http://localhost:8080/style.js"></script>
<script src="http://localhost:8080/vendors~app.js"></script>
<script src="http://localhost:8080/vendors~app~style.js"></script>
</body>
</html>
The elmish counterpart would be:
html [ Lang "en-EN" ] [
head [] [
meta [ CharSet "utf-8" ]
link [ Rel "stylesheet"; Href "https://an_url/file.css" ]
link [ Rel "shortcut icon"; Type "image/png"; Href "/favicon.png" ] ]
body [] [
div [ Id "elmish-app" ]
[ ]
script [ ] [ str "var __INIT_STATE__ = \"{\"SomeValueKey\":\"SomeValue\",\"AnotherValueKey\":\"AnotherValue\"}\"" ]
script [ Src "http://localhost:8080/app.js" ] [ ]
script [ Src "http://localhost:8080/style.js" ] [ ]
script [ Src "http://localhost:8080/vendors~app.js" ] []
script [ Src "http://localhost:8080/vendors~app~style.js"] []
]
]
the GiraffeViewEngine counterpart would be:
html [ _lang lang] [
head [] [
meta [ _charset "utf-8"]
meta [ _data "data-virtualpath" virtualPath ]
link [ _rel "stylesheet"; _href (sprintf "%O" portfolioUrl) ]
link [ _rel "shortcut icon"; _type "image/png"; _href "/favicon.png" ]
]
body [] [
div [_id "elmish-app"] []
script [] [ rawText "var __INIT_STATE__ = \"{\"SomeValueKey\":\"SomeValue\",\"AnotherValueKey\":\"AnotherValue\"}\"" ]
script [ _src (sprintf "%O%s" assetsBaseUrl "app.js") ] []
script [ _src (sprintf "%O%s" assetsBaseUrl "style.js") ] []
script [ _src (sprintf "%O%s" assetsBaseUrl "vendors~app.js") ] []
script [ _src (sprintf "%O%s" assetsBaseUrl "vendors~app~style.js") ] []
]
]
Still it is very close, you should be able to adapt it very quickly by adding _ to all attributes and convert them to lowercase.
Related
I'm trying to get topological movement of lines with Leaflet-Geoman plugin using TopoJSON. There is a method called topojson.mesh , which
Returns the GeoJSON MultiLineString geometry object representing the mesh for the specified object in the given topology. This is useful for rendering strokes in complicated objects efficiently, as edges that are shared by multiple features are only stroked once. If object is not specified, a mesh of the entire topology is returned.
Thanks to answer in this post, I've been able to return the MultiLineString using topojson.mesh. Since Leaflet-Geoman supports MultiLineString I came across with idea that may be the returned mesh can be edited with Leaflet-Geoman while maintaining the topological properties.
But when I try to accomplish it, the returned MultiLineString get separated in to two parts when I try to edit it using geoman plugin. My question is if that it is really a mesh that returned from topojson.mesh why the lines get seperated? Does that cause by geoman plugin? If that so, how can I get it done? Is there any way I can change the position of a node by dragging it while maintaining the topology?
I'll attach the code below
<!DOCTYPE html>
<html>
<head>
<title>Topology Test</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="src/css/leaflet.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
<link rel="stylesheet" href="https://unpkg.com/#geoman-io/leaflet-geoman-free#latest/dist/leaflet-geoman.css" />
<style>
#mapdiv {
height: 899px;
background-color: #acd6e2;
}
</style>
</head>
<body>
<div id="mapdiv"></div>
<script src="https://unpkg.com/topojson#3"></script>
<script src="src/js/leaflet-src.js"></script>
<script src="https://unpkg.com/#geoman-io/leaflet-geoman-free#latest/dist/leaflet-geoman.min.js"></script>
<script>
var mymap = L.map('mapdiv', {
layers: [
new L.TileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
'attribution': 'Map data © OpenStreetMap contributors'
})
],
});
mymap.pm.addControls({
position: 'topleft',
drawCircle: false,
});
fetch("data/data.geojson")
.then(res => res.json())
.then(json => {
//var layer = L.geoJSON(json).addTo(map);
var topo = topojson.topology([json]);
console.log(json, topo, topojson.mesh(topo));
var layerLines = L.geoJson(topojson.mesh(topo), {
fill: false,
}).addTo(mymap);
mymap.fitBounds(layerLines.getBounds());
});
</script>
</body>
</html>
data.geojson
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
-113,
37
],
[
-113,
40
],
[
-109,
40
],
[
-109,
37
],
[
-113,
37
]
]
]
}
},
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
-109,
37
],
[
-109,
39
],
[
-104,
39
],
[
-104,
37
],
[
-109,
37
]
]
]
}
},
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
-109,
34
],
[
-109,
37
],
[
-102,
37
],
[
-102,
34
],
[
-109,
34
]
]
]
}
},
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
-104,
37
],
[
-104,
40
],
[
-100,
40
],
[
-100,
37
],
[
-104,
37
]
]
]
}
}
]
}
For anyone who is looking for an answer to this type of question, I found a method using OpenLayers v6.5.0. Their is an example for Draw and Modify Features, which can maintain the topology of lines and polygons.
Hope this helps some one :)
How can I add a custom key-value pair to a grok pattern?
For example, I would like to add a key-value pair of "city": [["New York]] to the data result, even though it doesn't exist in the log line.
How do I do this? Tyvm, Keith :^)
Complete, Minimal, and Verifiable Example
Data:
WARN 10/11/2017 kmiklas
Grok:
%{WORD:logLevel}\s%{DATE:date}\s%{USER:user}
{
"logLevel": [
[
"WARN"
]
],
"date": [
[
"10/11/2017"
]
],
"DATE_US": [
[
"10/11/2017"
]
],
"MONTHNUM": [
[
"10",
null
]
],
"MONTHDAY": [
[
"11",
null
]
],
"YEAR": [
[
"2017",
null
]
],
"DATE_EU": [
[
null
]
],
"user": [
[
"kmiklas"
]
],
"USERNAME": [
[
"kmiklas"
]
]
}
I understand that will be a fixed field, so you need to use the mutate method, like this:
mutate { add_field => { "city" => [["New York"]] } }
if you want the new field to be only in some logs you need to include if
if "some_test" in [message]{mutate.....}
I want to create a button under these 2 text inputs. I just overtook the code from the docs. But I get this error :
The div function expects 2 arguments, but it got 5 instead.
How can I solve this?
-- VIEW
view : Model -> Html Msg
view model =
div []
[ input [ placeholder "Team 1", style "width" "300px", style "height" "30px", style "font-size" "25px", value model.content ] []
, input [ placeholder "Strength", style "width" "300px", style "height" "30px", style "font-size" "25px", value model.content ] []
]
div []
[ button [ style "color" "white", style "height" "60px", style "font-size" "30px", style "margin-right" "70px"]
]
Your code, with the children omitted, can be reformatted to
div [] [ ... ] div [] [ ... ]
Do you see why the compiler thinks you're giving div five arguments?
Since view should return a single element you'll have to wrap the div's in some other element, like another div:
div []
[ div [] [ ... ]
, div [] [ ... ]
]
I have been looking around here and there, but could not find the working resolution. I try to use Grok Filter inside the Logstash config file to filter Apache-Access log file. The log message looks like this: {"message":"00.00.0.000 - - [dd/mm/YYYY:hh:mm:ii +0000] \"GET /index.html HTTP/1.1\" 200 00"}.
On this moment I could only filter the client ip by using grok { match => [ "message", "%{IP:client_ip}" ] }.
I want to filter:
- The GET method,
- requested page (index.html),
- HTTP/1.1\,
- server response 200
- the last number 00 after 200 inside the message body
Please note that none of these does not work for me :
grok { match => { "message" => "%{COMBINEDAPACHELOG}" } }
or
grok { match => [ "message", "%{COMBINEDAPACHELOG}" ] }
Use the Grok Debugger to get an exact match on your log format. Its the only way.
http://grokdebug.herokuapp.com/
grok {
match => [ "message", "%{IP:client_ip} %{USER:ident} %{USER:auth} \[%{HTTPDATE:apache_timestamp}\] \"%{WORD:method} /%{NOTSPACE:request_page} HTTP/%{NUMBER:http_version}\" %{NUMBER:server_response} " ]
}
Use the following:
filter {
grok {
match => { "message" => "%{COMMONAPACHELOG}" }
}
}
As you can see from your pattern COMBINEDAPACHELOG would fail because there are some missing components:
COMBINEDAPACHELOG %{COMMONAPACHELOG} %{QS:referrer} %{QS:agent}
https://github.com/elastic/logstash/blob/v1.4.2/patterns/grok-patterns
You can use COMBINEDAPACHELOG pattern for this,
%{IPORHOST:clientip} %{USER:ident} %{USER:auth} \[%{HTTPDATE:timestamp}\] "(?:%{WORD:verb} %{NOTSPACE:request}(?: HTTP/%{NUMBER:httpversion})?|%{DATA:rawrequest})" %{NUMBER:response} (?:%{NUMBER:bytes}|-) %{QS:referrer} %{QS:agent}
for instance, consider this sample apache log
111.222.333.123 HOME - [01/Feb/1998:01:08:46 -0800] "GET /bannerad/ad.htm HTTP/1.0" 200 28083
"http://www.referrer.com/bannerad/ba_intro.htm" "Mozilla/4.01
(Macintosh; I; PPC)"
above filter will produce,
{
"clientip": [
[
"111.222.333.123"
]
],
"HOSTNAME": [
[
"111.222.333.123"
]
],
"IP": [
[
null
]
],
"IPV6": [
[
null
]
],
"IPV4": [
[
null
]
],
"ident": [
[
"HOME"
]
],
"USERNAME": [
[
"HOME",
"-"
]
],
"auth": [
[
"-"
]
],
"timestamp": [
[
"01/Feb/1998:01:08:46 -0800"
]
],
"MONTHDAY": [
[
"01"
]
],
"MONTH": [
[
"Feb"
]
],
"YEAR": [
[
"1998"
]
],
"TIME": [
[
"01:08:46"
]
],
"HOUR": [
[
"01"
]
],
"MINUTE": [
[
"08"
]
],
"SECOND": [
[
"46"
]
],
"INT": [
[
"-0800"
]
],
"verb": [
[
"GET"
]
],
"request": [
[
"/bannerad/ad.htm"
]
],
"httpversion": [
[
"1.0"
]
],
"BASE10NUM": [
[
"1.0",
"200",
"28083"
]
],
"rawrequest": [
[
null
]
],
"response": [
[
"200"
]
],
"bytes": [
[
"28083"
]
],
"referrer": [
[
""http://www.referrer.com/bannerad/ba_intro.htm""
]
],
"QUOTEDSTRING": [
[
""http://www.referrer.com/bannerad/ba_intro.htm"",
""Mozilla/4.01 (Macintosh; I; PPC)""
]
],
"agent": [
[
""Mozilla/4.01 (Macintosh; I; PPC)""
]
]
}
can be tested here,
https://grokdebug.herokuapp.com/
How can I add more "custom" symbols in the Insert Special Character panel please?
Thank you.
Note this can be done in the config file as well:
http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-specialChars
In your config file => config.js
CKeditor Documentation: http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-specialChars
config.specialChars = [ '"', '’', [ '&custom;', 'Custom label' ] ];
config.specialChars = config.specialChars.concat( [ '"', [ '’', 'Custom label' ] ] );
If you want to add special characters (Greek for example):
config.specialChars = config.specialChars.concat( [ [ 'α', 'alpha' ],
[ 'β', 'beta' ],
[ 'γ', 'gamma' ],
[ 'δ', 'delta' ],
[ 'ε', 'epsilon' ],
[ 'ζ', 'zeta' ],
[ 'η', 'eta' ],
[ 'θ', 'theta' ],
[ 'ι', 'iota' ],
[ 'κ', 'kappa' ],
[ 'λ', 'lambda' ],
[ 'μ', 'mu' ],
[ 'ν', 'nu' ],
[ 'ξ', 'xi' ],
[ 'ο', 'omicron' ],
[ 'π', 'pi' ],
[ 'ρ', 'rho' ],
[ 'σ', 'sigma' ],
[ 'τ', 'tau' ],
[ 'υ', 'upsilon' ],
[ 'φ', 'phi' ],
[ 'χ', 'chi' ],
[ 'ψ', 'psi' ],
[ 'ω', 'omega' ] ] );
Adding custom symbols is actually pretty easy. Within the ckeditor folder go to the file:
ckeditor/plugins/specialchar/dialogs/specialchar.js
You'll see a large code block halfway through the file containing a ton of entity codes, the last one is ≈ - after that one, add any new ones you want separated by commas and surrounded in single quotes. ,'new','new'.
I hope that helps!
Open up your config.js file,
If you want to insert male(♂) symbol use the below code in the config file,
config.specialChars = config.specialChars.concat('♂');
If you want to insert male symbol with custom label,
config.specialChars = config.specialChars.concat(['♂', 'Male']);
I have a CKeditor 4 installed, in my case I had to go to root > assets > backend > ckeditor > ckeditor.js
The code looks like this
I then added this patch
and it works