2017年1月31日 星期二

php 來抓取網頁的文字內容




$city=$_GET['city'];

$city=str_replace(" ", "", $city);


//  "http://www.weather-forecast.com/locations/".$city."/forecasts/latest"  ->   網址
$content=file_get_contents("http://www.weather-forecast.com/locations/".$city."/forecasts/latest");


//   \"  ->  "        \/  -> /      ,  s ->  space  ,  正規表示法
preg_match("/<\/b><span class=\"read-more-small\"><span class=\"read-more-content\"> <span class=\"phrase\">(.*?)<\/span>/s", $content, $matches);

echo $matches[0];

2017年1月25日 星期三

360 度網站

Ref :  https://www.holobuilder.com/explore?page=details&id=6617458781716480

Ref :  http://www.rwth-aachen.de/cms/root/Die-RWTH/Kontakt-Lageplaene/Raumverwaltung/~bdsd/Wildenhof/


Ref : http://www.panophoto.eu/Search/


When you hit the share button you get an iframe snippet that you just have to copy and add to your website.


mixpanel 範例


// Mixpanel 範例例
$(document).ready(function(){
// 進入⾴頁⾯面送出資料
var pageTitle = $('title').text();
mixpanel.track('PageView',{
'pageTitle': pageTitle
});
});



// 點擊連結送出資料
$('a').click(function(event){
var link = $(this).attr('href');
var title = $(this).attr('title');
mixpanel.track('ClickLink',{
'link': link || '',
'title': title || '',
'pageTitle': pageTitle
});
});


360 度照片

Ref :  http://www.ajax-zoom.com/examples/example15.php

jquert with 360 degree

Ref :  https://www.sitepoint.com/jquery-360-degrees-image-display-plugins/


Ref : http://www.mathieusavard.info/threesixty/demo.html

個完整的 React Native App 範例( 支援 iOS/Android )

Ref :  https://github.com/liumingmusic/react-native_toiletApp

2017年1月14日 星期六

animated css



先到     http://imakewebthings.com/waypoints/  下載 js

然後把他放在   /js/  folder

然後再到    https://daneden.github.io/animate.css/  下載  css

然後把他放在   /css/  folder


在code 裡面加入使用 ...


css:

<link rel="stylesheet" type="text/css" href="vendors/css/animate.css">

js:

 <script src="vendors/js/jquery.waypoints.min.js"></script>


在  html5 裡面加入相對應的class name


例如:    <span class="js--wp-5">

 <div class="col-md-8 col-sm-8 col-xs-6 tetimonmeta">
                    林惠文
                    <span class="js--wp-5">小文</span>
                </div>


然後在js裡面加入


$(document).ready(function(){


 $('.js--wp-5').waypoint(function(direction){
        $('.js--wp-5').addClass('animated zoomInDown');
    }, {
        offset:'50%'
    });


});


要甚麼效果可以自己去選

例如 :  要  bounceIn 就打 bounceIn ..  大小寫要一模一樣




ionicons 很多icon可以下載



Ref :  http://ionicons.com/

2017年1月13日 星期五

face detection in web

Ref :  https://code.tutsplus.com/tutorials/how-to-create-a-face-detection-app-with-react-native--cms-26491


Before we start writing our app, I would like to take a moment to talk about the API we will be using for face detection. Microsoft's face detection API provides face detection and face recognition functionality via a cloud-based API. This allows us to send an HTTP request containing either an image or a URL of an existing image on the web, and receive data about any faces detected in the image.
You can make requests to Microsoft's face detection API by sending a POST request to https://api.projectoxford.ai/face/v1.0/detect. The request should contain the following header information:
  • Content-Type: This header field contains the data type of the request body. If you are sending the URL of an image on the web, then the value of this header field should be application/json. If you are sending an image, set the header field to application/octet-stream.
  • Ocp-Apim-Subscription-Key: This header field contains the API key used for authenticating your requests. I will show you how to obtain an API key later in this tutorial.
By default, the API only returns data about the boxes that are used to enclose the detected faces in the image. In the rest of this tutorial, I will refer to these boxes as face boxes. This option can be disabled by setting the returnFaceRectangle query parameter to false. The default value is true, which means that you don't have to specify it unless you want to disable this option.

You can supply a few other optional query parameters to fetch additional information about the detected faces:
  • returnFaceId: If set to true, this option assigns a unique identifier to each of the detected faces.
  • returnFaceLandmarks: By enabling this option, the API returns an array of face landmarks of the detected faces, including eyes, nose, and lips. This option is disabled by default.
  • returnFaceAttributes: If this option is enabled, the API looks for and returns unique attributes for each of the detected faces. You need to supply a comma-separated list of the attributes that you are interested in, such as age, gender, smile, facial hair, head pose, and glasses.
Below is a sample response that you get from the API given the following request URL:
This sample response is pretty self-explanatory so I am not going to dive deeper into what each attribute stands for. The data can be used to show the detected faces, their different attributes, and how you can show them to the user. This is achieved by interpreting the x and y coordinates or the top and left positioning.
To use Microsoft's face detection API, each request needs to be authenticated with an API key. Here are the steps you need to take to acquire such a key.
Create a Microsoft Live account if you don't already have one. Sign in with your Microsoft Live account and sign up for a Microsoft Azure Account. If you don't have a Microsoft Azure account yet, then you can sign up for a free trial, giving you access to Microsoft's services for 30 days.
For the face detection API, this allows you to send up to twenty API calls per minute for free. If you already have an Azure account, then you can subscribe to the Pay-As-You-Go plan so you only pay for what you use.
Once your Microsoft Azure account is set up, you are redirected to the Microsoft Azure Portal. In the portal, navigate to the search bar and enter cognitive services in the search field. Click the result that says Cognitive Services accounts (preview). You should see an interface similar to the following: